Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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, t...
The <canvas> tag’s attributes
<canvas id="myCanvas" width="600"
height="400"> </canvas>
• Before the canvas can be used fo...
Default content for <canvas>
<canvas id="myCanvas" width="600"
height="400">
<p>Some default content can appear
here.</p>
...
Doing things with <canvas>
<canvas id="myCanvas" width="600"
height="400">
<p>Some default content can appear
here.</p>
</...
Exercises
Download ZIP here:
http://bit.ly/mm_canvas
http://bit.ly/mm_canvas
More on GitHub: https://github.com/macloo/can...
What’s in the .js file?
• The JavaScript must not run until after the
HTML has finished loading.
• Therefore, we must use ...
Function to wrap JS code for canvas (1)
window.onload = draw;
// calls function named "draw" – see it below
function draw(...
Function to wrap JS code for canvas (2)
window.onload = function () {
// calls an unnamed function
// put your drawing cod...
Target the canvas using its ID (in your HTML)
window.onload = draw;
// calls function named "draw"
function draw() {
var c...
Add context, wrap this in an ‘if’ statement
window.onload = draw;
function draw() {
var canvas = document.getElementById('...
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);
// dra...
Draw a square or a rectangle
// change both starting points from 0 to 100
ctx.fillRect(100,100,600,400);
// draw a filled ...
Change the color (fillStyle)
// add a color first, then draw
ctx.fillStyle = "#E01B6A";
ctx.fillRect(100,100,600,400);
// ...
Change the color (fillStyle) again
// add a color first, then draw
ctx.fillStyle = "#E01B6A";
ctx.fillRect(100,100,600,400...
Draw a new rectangle
// add a color first, then draw
ctx.fillStyle = "#E01B6A";
ctx.fillRect(100,100,600,400);
ctx.fillSty...
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 c...
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 c...
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, 3...
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...
function draw() {
var ctx =
document.getElementById('motoCanvas').getContext('2d');
ctx.drawImage(bgImage, 0, 0, 600, 450)...
var render = function () {
if (moto.x < 650) {
ctx.drawImage(bgImage, 0, 0);
// must redraw bgImage each time
ctx.drawImag...
// press the Return/Enter key to play the animation
document.body.onkeydown = function(e) { // listen for a key
e = event ...
Best canvas tutorial (thorough!):
https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Canvas_tutorial
More examples w...
Introduction to HTML5 canvas
Presentation by Mindy McAdams
University of Florida
April 2014
Introduction to HTML5 Canvas
Upcoming SlideShare
Loading in …5
×

Introduction to HTML5 Canvas

4,665 views

Published on

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

  • Be the first to comment

Introduction to HTML5 Canvas

  1. 1. Introduction to HTML5 canvas Drawing and Animation in the Browser
  2. 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. 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. 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. 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. 6. Exercises Download ZIP here: http://bit.ly/mm_canvas http://bit.ly/mm_canvas More on GitHub: https://github.com/macloo/canvas
  7. 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. 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. 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. 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. 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. 12. Now let’s do some exercises! OPEN: canvas1.html scripts/canvas1.js CLOSE: canvas0.html scripts/canvas0.js
  13. 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. 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. 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. 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. 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
  18. 18. Interact with this code: http://bit.ly/mm_codepen1
  19. 19. A new exercise … OPEN: triangles.html scripts/triangles.js CLOSE: canvas1.html scripts/canvas1.js
  20. 20. View the HTML file – triangles.html
  21. 21. 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
  22. 22. A new triangle – triangles.html
  23. 23. 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
  24. 24. Another new triangle, flipped – triangles.html
  25. 25. A new exercise … OPEN: images.html scripts/images.js CLOSE: triangles.html scripts/triangles.js
  26. 26. 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.
  27. 27. Again, images.js — can you make the image HALF its real size — without distorting it in any way?
  28. 28. 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
  29. 29. One last exercise … OPEN: animate.html scripts/animate.js CLOSE: images.html scripts/images.js
  30. 30. Basic animation — animate.html and animate.js
  31. 31. 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(); }
  32. 32. 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 …
  33. 33. 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 …
  34. 34. // 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.
  35. 35. 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
  36. 36. Introduction to HTML5 canvas Presentation by Mindy McAdams University of Florida April 2014

×