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 displaying questionable style

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.

Style on the Canvas with ZIM

We are using the ZIM JavaScript Canvas Framework. For alternatives, please see ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework. We don’t think you will find styles in other libraries. Also, please note, that the styles are on the ZIM DisplayObjects. ZIM also has styles added to controls since the time of the video below.

Demo for style on the canvas :: color scheme not recommended ;-)

TYPES AND GROUPS (like CSS selectors)

The earlier code example, would apply a width of 500 and corner of 0 to all display objects made afterwards. We can set a type of Button to apply…