YOUR GUIDE TO
Style on the Canvas
Dr Abstract is no stranger to style, nor is the Canvas!
Welcome readers from ◎ Your Guide to Coding Creativity on the Canvas
Dr Abstract coded CSS-like style on the canvas in a single day and was surprised that it was merely fifty lines of code! Of course, for you to use styles on the canvas, it is as easy as CSS. Let’s take a look at styles on the canvas and then we will explain the story behind the code.
Any parameter can be used as a style!
You can code along with this Online Editor. Copy or type this and TEST:
NOTE: we now have the ZIM Editor (based on the Kids Editor shown).
STYLE = {width:500, corner:0};
new Button().center();
Note the commas after the styles, not semi-colons, and units are not required (nor are they missed). You may think this format comes from CSS but really it is the other way around. Object literals were in programming before CSS and used for the same reason, to set properties of objects.
We are using the ZIM JavaScript Canvas…