Introduction to HTML5 Canvas

Introduction to HTML5 canvas
Drawing and Animation
in the Browser

The <canvas> tag
• This is a paired tag, similar to a <div> tag in
many ways.
<div> </div>
<canvas> </canvas>
• However, the area enclosed by the <canvas>
tags can be used for drawing and animation

The <canvas> tag’s attributes
<canvas id="myCanvas" width="600"
height="400"> </canvas>
• Before the canvas can be used for drawing and
animation, it must have an ID, width, and
height assigned to it.
• These may appear in the HTML, or they may
be created with JavaScript/jQuery.

Default content for <canvas>
height="400">
<p>Some default content can appear
here.</p>
</canvas>
• In Web browsers that do not support HTML5, the
canvas will not appear.
• You may put default content between the canvas
tags. Only people without HTML5 support will see it.

Doing things with <canvas>
height="400">
<p>Some default content can appear
here.</p>
</canvas>
• This is all you’ll see in the HTML document.
Everything else will need JavaScript.

Exercises
Download ZIP here:
http://bit.ly/mm_canvas
http://bit.ly/mm_canvas
More on GitHub: https://github.com/macloo/canvas

What’s in the .js file?
• The JavaScript must not run until after the
HTML has finished loading.
• Therefore, we must use window.onload
in the .js file
• We must wrap all the code for the canvas in a
function that will wait to run until the page
has loaded.
OPEN:
canvas0.html
scripts/canvas0.js

Function to wrap JS code for canvas (1)
window.onload = draw;
// calls function named "draw" – see it below
function draw() {
// put your drawing code here, as many
// lines as needed
} // close draw() function
This is one way to wrap the drawing code.
scripts/canvas0.js

Function to wrap JS code for canvas (2)
window.onload = function () {
// calls an unnamed function
// lines as needed
} // close the unnamed function
This is another way to wrap the drawing code.
scripts/canvas0.js

Target the canvas using its ID (in your HTML)
// calls function named "draw"
function draw() {
var canvas = document.getElementById('myCanvas');
// canvas with id="myCanvas"
//lines as needed
canvas0.html
scripts/canvas0.js

Add context, wrap this in an ‘if’ statement
function draw() {
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//lines as needed
} // close if
canvas0.html
scripts/canvas0.js
} // close if
The “if” prevents JavaScript from throwing an error if
canvas is not present or not working.

Now let’s do some exercises!
OPEN:
canvas1.html
scripts/canvas1.js
CLOSE:
canvas0.html
scripts/canvas0.js

Draw a square or a rectangle
ctx.fillRect(0,0,600,400);
// draw a filled rectangle
} // close if
scripts/canvas1.js

Draw a square or a rectangle
// change both starting points from 0 to 100
ctx.fillRect(100,100,600,400);
// draw a filled rectangle
// reload the HTML and see what happens
scripts/canvas1.js

Change the color (fillStyle)
// add a color first, then draw
ctx.fillStyle = "#E01B6A";
ctx.fillRect(100,100,600,400);
scripts/canvas1.js
Find a nice color quickly at http://www.colorpicker.com/
Hexadecimal or RGB or rgba codes are all okay.

Change the color (fillStyle) again
ctx.fillRect(100,100,600,400);
ctx.fillStyle = "#F7AF05";
// don’t reload the HTML: nothing will happen
scripts/canvas1.js
Hexadecimal or RGB or rgba codes are all okay.

Draw a new rectangle
ctx.fillRect(100,100,600,400);
ctx.fillStyle = "#F7AF05";
ctx.fillRect(0,200,500,100);
scripts/canvas1.js

Interact with this code: http://bit.ly/mm_codepen1

A new exercise …
OPEN:
triangles.html
scripts/triangles.js
CLOSE:
canvas1.html
scripts/canvas1.js

View the HTML file – triangles.html

Draw a new triangle
1. Open triangles.js
2. Do not delete any of the existing triangles
3. To write your own code, first copy the code
for triangle 3 (lines 25–31)
4. Paste the code at line 51
5. Change the color
6. Change all three points of the triangle
7. Save and reload the HTML

A new triangle – triangles.html

Draw another new triangle
1. Still in triangles.js
2. Copy and paste the code you just edited
3. Paste it below the code ctx.fill();
4. Change all three points of the triangle to
make this one “flipped” from your first new
one (remember the grid)
5. Save and reload the HTML

Another new triangle, flipped – triangles.html

A new exercise …
OPEN:
images.html
scripts/images.js
CLOSE:
triangles.html
scripts/triangles.js

The motorcycle image is 600 x 300. Look at images.js —
figure out how to move it so we see the full photo on the canvas.

Again, images.js — can you make the image HALF its real size
— without distorting it in any way?

Shrink the motorcycle
// matches the previous slide
var img = new Image();
img.onload = function() {
ctx.drawImage( img, 300, 50, 300, 150 );
} // close img.onload function
img.src = 'images/motorcycle.png';
scripts/images.js

One last exercise …
OPEN:
animate.html
scripts/animate.js
CLOSE:
images.html
scripts/images.js

Basic animation — animate.html and animate.js

window.onload = init; // calls the function named "init"
// used in timer, below
var newInterval;
// set up the images and call the main function, "draw"
var bgImage = new Image();
var motoImage = new Image();
function init() {
bgImage.src = "images/sketch.jpg";
motoImage.src = "images/motorcycle.png";
draw();
}

function draw() {
var ctx =
document.getElementById('motoCanvas').getContext('2d');
ctx.drawImage(bgImage, 0, 0, 600, 450); // show the background
// make an Object with properties
// be careful with the punctuation!
var moto = {
factor: 0.991,
x: -600, // places it offstage, left
y: 400,
w: motoImage.width,
h: motoImage.height
} “draw” function
begins …

// press the Return/Enter key to play the animation
document.body.onkeydown = function(e) { // listen for a key
e = event || window.event; // any kind of event
var keycode = e.charCode || e.keyCode; // any kind of key
if(keycode === 13) { // only the Return or Enter key
// call the "render" function on a timer that will repeat it
// larger numbers are slower (in milliseconds)
newInterval = setInterval(render, 10);
}
}
} // close draw()
“draw” function
continued … and
ends.

Best canvas tutorial (thorough!):
https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Canvas_tutorial
More examples with simple code:
http://www.macloo.com/examples/canvas/
GitHub repo:
https://github.com/macloo/canvas

Introduction to HTML5 canvas
Presentation by Mindy McAdams
University of Florida
April 2014

Introduction to HTML5 Canvas

In this document