DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Easy Shapes on the Canvas!
Dr Abstract
Dr Abstract

Posted on • Updated on

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();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

πŸ‘‹ Welcome new DEV members in our Welcome Thread

Say hello to the newest members of DEV.