A university lecture for journalism students -- how to use the canvas element to add graphics and animation to Web pages. Updated April 2014. Basics for beginners. See also https://github.com/macloo/canvas

1. Introduction to HTML5 canvas
Drawing and Animation
in the Browser

2. 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

3. 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.

4. Default content for <canvas>
<canvas id="myCanvas" width="600"
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.

5. Doing things with <canvas>
<canvas id="myCanvas" width="600"
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.

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

7. 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

8. 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

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

10. Target the canvas using its ID (in your HTML)
window.onload = draw;
// calls function named "draw"
function draw() {
var canvas = document.getElementById('myCanvas');
// canvas with id="myCanvas"
// put your drawing code here, as many
//lines as needed
} // close draw() function
var canvas = document.getElementById('myCanvas');
// canvas with id="myCanvas"
canvas0.html
scripts/canvas0.js

11. Add context, wrap this in an ‘if’ statement
window.onload = draw;
function draw() {
var canvas = document.getElementById('myCanvas');
// canvas with id="myCanvas"
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// put your drawing code here, as many
//lines as needed
} // close if
} // close draw() function
canvas0.html
scripts/canvas0.js
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
} // close if
The “if” prevents JavaScript from throwing an error if
canvas is not present or not working.

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

13. Draw a square or a rectangle
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,600,400);
// draw a filled rectangle
} // close if
scripts/canvas1.js

14. 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

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

16. Change the color (fillStyle) again
// add a color first, then draw
ctx.fillStyle = "#E01B6A";
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.

17. Draw a new rectangle
// add a color first, then draw
ctx.fillStyle = "#E01B6A";
ctx.fillRect(100,100,600,400);
ctx.fillStyle = "#F7AF05";
ctx.fillRect(0,200,500,100);
// reload the HTML and see what happens
scripts/canvas1.js

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

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

21. View the HTML file – triangles.html

22. 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

23. A new triangle – triangles.html

24. 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

25. Another new triangle, flipped – triangles.html

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

27. 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.

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

29. 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

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

31. Basic animation — animate.html and animate.js

32. 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();
}

33. 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 …

34. var render = function () {
if (moto.x < 650) {
ctx.drawImage(bgImage, 0, 0);
// must redraw bgImage each time
ctx.drawImage(motoImage, moto.x, moto.y, moto.w, moto.h);
// the next four lines will be changing the values each time
// this function runs -- this is the ENGINE of the animation!
moto.x += 10; // move 10 px to right
moto.y -= 2.5; // move 3 px closer to top
moto.w = moto.w * moto.factor; // decrease size
moto.h = moto.h * moto.factor; // decrease size
} else {
clearInterval(newInterval); // kills the timer
// reset everything so we can replay it:
moto.x = -600;
moto.y = 400;
moto.w = motoImage.width;
moto.h = motoImage.height;
}
}
“draw” function
continued …

35. // 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.

36. 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

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