YOUR GUIDE TO

Style on the Canvas

Dr Abstract is no stranger to style, nor is the Canvas!

Dr Abstract
9 min readJul 31, 2020

--

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…

--

--

Dr Abstract

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator