Easy Shapes on the Canvas!

Traditionally adding shapes to the canvas was a few lines of code to set the context, fill, stroke, shape, position, etc. With ZIM the general JavaScript Canvas Framework it is as follows:

new Circle(100,red).center(); 

The article picture was made with the following code. This may look like a lot of code but we are laying out six shapes in a tile. So just look at each shape in the array. Nice and simple! The colors are being applied by a series in the STYLE but could have been added to each individual shape - just like we did above. Paste the code here: https://zimjs.com/lab.html to try it!

STYLE = {color:series(blue, green, orange, yellow, red)}; var shapes = [ new Circle(), new Rectangle(90,90), new Triangle(), new Poly(), new Line({ lineType:"curve", lineOrientation:HORIZONTAL, endHead:"arrow" }).to(90, 90), new Flare({ angles:[-90], color:brown, anglesA:[15], anglesB:[15], thickness:45, lengths:[100] }) ]; var tile = new Tile({ obj:shapes, cols:3, rows:2, spacingH:10, spacingV:10, unique:true, align:CENTER, valign:CENTER }).center(); 

There are is also a Blob and a Squiggle shape. More on those later!

If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.