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
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.
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
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
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
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
Notas do Editor
CONTACT ----- http://mindymcadams.com/ ----- Lecture by Mindy McAdams, University of Florida, April 2013.
http://bit.ly/mm_canvas
This is one way to wrap the drawing code.
This is another way to wrap the drawing code.
This draws a rectangle starting at x = 0 (horizontal = left edge) and y = 0 (vertical = top). Then it goes right to the 600-pixel mark and down to the 400-pixel mark – and fills that with the default color, which is black. Open canvas1.html and LOOK AT IT.
This draws a rectangle starting at x = 100 (horizontal = left edge) and y = 100 (vertical = top). Then it goes right to the 600-pixel mark and down to the 400-pixel mark.
This draws a rectangle starting at x = 100 (horizontal = left edge) and y = 100 (vertical = top). Then it goes right to the 600-pixel mark and down to the 400-pixel mark.
This draws a rectangle starting at x = 100 (horizontal = left edge) and y = 100 (vertical = top). Then it goes right to the 600-pixel mark and down to the 400-pixel mark.
This draws a rectangle starting at x = 100 (horizontal = left edge) and y = 100 (vertical = top). Then it goes right to the 600-pixel mark and down to the 400-pixel mark.
The x axis is horizontal. The y axis is vertical. The numbers represent pixels. The top left corner is 0,0. This canvas is 600 x 400. The lines of the grid are 20 pixels apart. http://www.macloo.com/examples/canvas/canvas8.html