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.