Introduction to HTML5 canvas

Drawing and Animationin 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>

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

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.

ExercisesDownload 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.htmlscripts/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

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

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.htmlscripts/canvas0.js

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.

Now let’s do some exercises!

OPEN: canvas1.htmlscripts/canvas1.js

CLOSE: canvas0.htmlscripts/canvas0.js

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

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);

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

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.jsHexadecimal or RGB or rgba codes are all okay.

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

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

A new exercise …

OPEN: triangles.htmlscripts/triangles.js

CLOSE: canvas1.htmlscripts/canvas1.js

View the HTML file – triangles.html

Draw a new triangle

1. Open triangles.js2. Do not delete any of the existing triangles3. To write your own code, first copy the code

for triangle 3 (lines 25–31)4. Paste the code at line 515. Change the color6. Change all three points of the triangle7. Save and reload the HTML

A new triangle – triangles.html

Draw another new triangle

1. Still in triangles.js2. Copy and paste the code you just edited3. 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.htmlscripts/images.js

CLOSE: triangles.htmlscripts/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.htmlscripts/animate.js

CLOSE: images.htmlscripts/images.js

Basic animation — animate.html and animate.js

window.onload = init; // calls the function named "init" // used in timer, belowvar 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, lefty: 400,w: motoImage.width,h: motoImage.height

} “draw” function begins …

var render = function () {if (moto.x < 650) {

ctx.drawImage(bgImage, 0, 0); // must redraw bgImage each timectx.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 rightmoto.y -= 2.5; // move 3 px closer to topmoto.w = moto.w * moto.factor; // decrease sizemoto.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 …

// press the Return/Enter key to play the animationdocument.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 McAdamsUniversity of Florida

April 2014