Introduction to HTML5 Canvas

3,101 views
2,888 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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,101
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
134
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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
  • View the HTML file – triangles.html
  • View the HTML file – triangles.html
  • View the HTML file – triangles.html
  • View the HTML file – images.html
  • View the HTML file – images.html
  • View the HTML file – animate.html
  • From animate.js
  • From animate.js
  • From animate.js
  • From animate.js
  • https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial http://www.macloo.com/examples/canvas/
  • CONTACT ----- http://mindymcadams.com/ ----- Lecture by Mindy McAdams, University of Florida, April 2013.
  • 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

    ×