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

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 // 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.html scripts/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.html scripts/canvas1.js CLOSE: canvas0.html scripts/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.js Hexadecimal 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.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