DEV Community

loading...
Cover image for Easy Shapes on the Canvas!

Easy Shapes on the Canvas!

zimlearn profile image Dr Abstract ・1 min read

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:

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.

Discussion (0)

Forem Open with the Forem app