A blank slate to draw graphs, game graphics, video, or
other visual images on the fly.”

• 2D drawing tool within all modern browsers
• No downloads (plugins) required!
• Openly developed by the WC3 (WWW consortium)

Introduced by Apple, as
part of WebKit in 2004, to
show the power of
desktop apps within their
Safari browser.
Now a standard!

<canvas id=“myCanvas" width="150" height="150"></canvas>
• Only 2 attributes: Width & Height
• Default values for width and height: 300px x 150px

Older browsers may not support the <canvas>
element
Therefore, we insert fallback text, just in case it won’t
display
<canvas id=“myChart" width="150" height="150">
Current version of IE: 11
</canvas>

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here:
Hey, you need to update your browser!
}

The canvas is a two-dimensional grid.
The coordinate (0, 0) is at the upper-
left corner of the canvas.
Along the X-axis, values increase from
left to right.
Along the Y-axis, values increase from
top to bottom.

var canvas = document.getElementById(‘myCanvas');
var ctx = canvas.getContext('2d');

var canvas = document.getElementById(“myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 25, 150, 100);
Parameters:
X: The x-coordinate of the upper-left corner of the rectangle
Y The y-coordinate of the upper-left corner of the rectangle
Width: The width of the rectangle, in pixels
Height: The height of the rectangle, in pixels

•fillStyle: can be a CSS color, a pattern, or a gradient. (Default color is black)
•strokeStyle: like fillStyle, but used for lines
•fillRect( x, y, width, height) draws a rectangle filled with the current fill style.
•strokeRect(x, y, width, height) draws an rectangle w/ current stroke style. Only draws edges.
•clearRect( x, y, width, height) clears the pixels in the specified rectangle.

<canvas id="myCanvas" width=“300" height="150"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect (0, 0, 300, 150);
ctx.clearRect(20, 20, 100, 50);

<canvas id="myCanvas" width=200 height=120></canvas>
var canvas = document.getElementById('myCanvas');
var ctxt = canvas.getContext('2d');
ctx.fillStyle = '#000000'; // set color to black
ctx.fillRect(0, 0, 200, 40); // draw (200x40 pixel) rectangle at (0,0
ctx.fillStyle = '#FF0000'; // set color to red
ctx.fillRect(0, 40, 200, 40); // draw (200x40 pixel) rectangle at (0,40)
ctx.fillStyle = '#FFCC00'; // set color to gold
ctx.fillRect(0, 80, 200, 40); // draw (200x40 pixel) rectangle at (0,80)

• Scale(): Scales the current drawing, bigger or smaller
• Rotate(): Rotates current drawing
• Translate(): Moves the (0,0) position on the canvas
• Transform(): Replaces current transform matrix for current drawing
• setTransform(): Resets current transform matrix to the identity matrix, then runs
transform()

<canvas id="myCanvas" width="300" height="200"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.rotate(20 * Math.PI / 180);
ctx.fillRect(50, 20, 100, 50);
Save & Restore context
Save & Restore context (cont’d)
To calculate from degrees to radians: degrees * Math.PI/180

<canvas id="myCanvas" width=“300" height=“300"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 100, 30); // draw first rectangle
ctx.scale(2,2); // 2x width, 2x height
ctx.strokeRect(5, 5, 100, 30); // draw second triangle

http://www.w3schools.com/tags/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0
A – Scales the drawing horizontally
B – Skew the drawing horizontally
C- Skew the drawing vertically
D - Scale the drawing vertically
E – Moves the drawing horizontally
F – Moves the drawing vertically

<canvas id="myCanvas" width=“300" height=“300"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect (10, 10, 100, 50);
ctx.translate(70, 70);
ctx.fillRect (10, 10, 100, 50);

Three steps are required:
1. Begin the path – beginPath()
2. Move the points – moveTo() or lineTo()
3. Stroke (outline) / Fill the path – stroke() or fill()
4. *Close the path – closePath()
*Note: When you call fill(), any open shapes are closed automatically, so you
don’t need to call closePath(). This is not true when you use stroke(), though.

Moves the “pencil” to the x, y coordinates
Doesn’t draw anything, but becomes part of the path
Think of it as lifting a pencil, then places it at this spot

Drags the “pencil” to the x, y coordinates

var canvas = document.getElementById(‘myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath(); // starts drawing
ctx.moveTo(75,50); // First point (left)
ctx.lineTo(100,75); // Bottom point
ctx.lineTo(100,25); // Top point
ctx.fill(); // black is default
}

Unlike text on a webpage, there is no box model, so CSS layout
techniques are not available, such as:
- float, margin, padding, word wrap
Available attributes:
• font (style, font variant, weight, size, line height, family)
• textAlign (start, end, left, right, center)
• TextBaseline (top, hanging, middle, alphabetic, ideographic, bottom)

<canvas id=“myCanvas" width=“150” height=“100”></canvas>
var canvas = document.getElementById ('myCanvas'); // access the canvas object
var ctx = canvas.getContext ('2d'); // access the canvas context
ctx.fillRect (5,5,140,50); // fill rectangle with black color
ctx.fillStyle = 'red'; // set text color to 'red'
ctx.font = '40pt Arial'; // define the CSS font for writing text
ctx.fillText ('Text',1 0,50); // write the text 'Text‘

var canvas =document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,100);
Smooth transition between two colors

CSS Gradients
Canvas gradients aren’t widely used
Instead, most developers prefer

#grad
{
background: -webkit-linear-gradient(left, white, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right white, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white, black); /* Standard syntax */
}

Impact.js
Turbulenz
Paper.js
Canvas.js
Processing.js
EaselJS
HTML5 Canvas Tutorials

Link to HTML5 cheat sheet