INFO PAGE

Canvas Introduction

Canvas Coding

The Canvas tag was introduced in HTML 5. You can dynamically draw shapes and text onto the canvas with JavaScript.

// HTML
<canvas id="myCanvas"></canvas>

// JAVASCRIPT
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.fillRect(0, 0, 200, 150);

CreateJS / EaselJS

EaselJS is one of several popular open source libraries to make it easier to use the canvas. EaselJS is part of the CreateJS library and is a module used to make general Interactive Media such as games, generative art, and highly graphical experiences. It provides a hierarchical display list, a robust interaction model and helper classes.

// HTML
<canvas id="myCanvas"></canvas>

// JAVASCRIPT
var stage = new createjs.Stage("myCanvas");
var rect = new createjs.Shape();
rect.graphics.beginFill("blue").drawRect(0, 0, 200, 150);
rect.x = 100; rect.y = 100;
stage.addChild(rect);
stage.update();
rect.on("click", function() {rect.x = 200; stage.update();});

ZIM - Code Creativity!

ZIM is an open source JavaScript framework for the Canvas. ZIM is powered by CreateJS and provides many conveniences, components and controls such as one-line drag and drop, multiple types of hit tests, buttons, sliders, dials, etc. as well as responsive design layout, page control, accessibility, style, particle emitters, parallax and much more.

new Rectangle(200, 150, blue)
	.center()
	.drag();