YOUR GUIDE TO

Coding Creativity on the Canvas

For everyone from absolute beginner to absolute professional

Canvas Examples :: games, apps, puzzles, art, visualizations

Let’s get you coding in this very first paragraph! Type or paste the code below into a simple Online Editor and press TEST to make a draggable circle! You can do it, it is just one or two clicks and you are coding. Welcome to the Canvas, an HTML tag for visual content like art and games and can be coded with JavaScript, the word’s most popular programming language.

new Circle().center().drag();

ZIM Editor

You can set the size (radius) and color of the circle like so:

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

There are other settings and many more types of objects to make. Let’s try a few more to get a sense of what we can do. Then we will introduce the parts of coding creativity on the canvas! CLEAR your code, type this and TEST:

new Blob().center();

A Blob() has optional Bezier handles. There is a Squiggle() too!