Introduction to HTML5 Canvas

1.
CANVAS introduction to: Tuesday, September3, 13

2.
Mark J. Morris @blurredbits presentedby: September 3, 2013 Tuesday, September 3, 13

3.
“Added in HTML5,the HTML <canvas> element is an element which can be used to draw graphics via scripting (usually Javascript).” Tuesday, September 3, 13

4.
Chrome 25+ Firefox 20+ Safari5+ IE 9.0+ Opera 9.0+ Tuesday, September 3, 13

5.
index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <linkrel=”stylesheet” href=”css/style.css”> </head> <body> <script src=”js/canvas.js”></script> </body> </html> Tuesday, September 3, 13

6.
index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <linkrel=”stylesheet” href=”css/style.css”> </head> <body> <script src=”js/canvas.js”></script> </body> </html> <canvas id=”intro” width=300 height=150> </canvas> Tuesday, September 3, 13

7.
index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <linkrel=”stylesheet” href=”css/style.css”> </head> <body> <script src=”js/canvas.js”></script> </body> </html> <canvas id=”intro” width=300 height=150> </canvas> <p>Oh noes! No canvas support!</p> Tuesday, September 3, 13

8.
Tuesday, September 3,13

9.

10.

11.
basic canvas method fillRect(floatx, float y, float width, float height) Tuesday, September 3, 13

12.

13.
js/canvas.js window.onload = canvasApp(); functioncanvasApp () { } var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); theCanvas.fillStyle = "rgb(160, 160, 160)"; theCanvas.fillRect(0, 0, 50, 50); Tuesday, September 3, 13

14.

15.
theCanvas.fillStyle = “orange”; theCanvas.fillStyle= “#FFA500”; theCanvas.fillStyle = “rgb(255,165,0)”; theCanvas.fillStyle = “rgba(255,165,0,1)”; Tuesday, September 3, 13

16.

17.

18.
Text Methods Tuesday, September3, 13

19.
js/canvas.js window.onload = canvasApp(); functioncanvasApp () { } ! ! theCanvas.fillStyle = "blue"; ! theCanvas.font = "30px Arial"; ! theCanvas.textBaseline = "top"; ! theCanvas.fillText("Fort Collins", 0, 0); ! theCanvas.fillStyle = "red"; ! theCanvas.fillText("Internet", 0, 50); ! theCanvas.fillStyle = "blue"; ! theCanvas.fillText("Pros",0,100); var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); Tuesday, September 3, 13

20.

21.

22.

23.

24.
Line Methods Tuesday, September3, 13

25.
js/canvas.js window.onload = canvasApp(); functioncanvasApp () { } ! ! theCanvas.beginPath(); ! theCanvas.moveTo(50, 25); ! theCanvas.lineTo(50, 125); ! theCanvas.lineTo(150, 125); ! theCanvas.closePath(); ! theCanvas.stroke(); var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); Tuesday, September 3, 13

26.

27.

28.

29.

30.

31.
(2,1) (2,4) Tuesday, September 3,13

32.
(1.5,1) (1.5,4) Tuesday, September 3,13

33.
js/canvas.js window.onload = canvasApp(); functioncanvasApp () { } ! ! theCanvas.beginPath(); ! theCanvas.moveTo(50.5, 25.5); ! theCanvas.lineTo(50.5, 125.5); ! theCanvas.lineTo(150.5, 125.5); ! theCanvas.closePath(); ! theCanvas.stroke(); var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); Tuesday, September 3, 13

34.

35.
arcs arc(x, y, radius,startAngle, endAngle, anticlockwise) bezier bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) quadratic quadraticCurveTo(cp1x, cp1y, x, y) Tuesday, September 3, 13

36.
Image Methods Tuesday, September3, 13

37.
js/canvas.js window.onload = canvasApp(); functioncanvasApp () { } ! var img = new Image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; ! img.onload = function(){ ! ! theCanvas.drawImage(img,0,0);! ! }; var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); Tuesday, September 3, 13

38.

39.

40.

41.
scaling drawImage(image, x, y,width, height) slicing drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Tuesday, September 3, 13

42.
Gradients Animations Patterns Shadows Transformations Compositing Video Audio Tuesday, September 3,13

43.
Additional Resources Tuesday, September3, 13

44.

45.

46.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial Tuesday, September 3,13

47.
Thursday 9/5 6:00pm Crooked Cup Tuesday,September 3, 13

48.
Mark J. Morris @blurredbits Thanks! Tuesday,September 3, 13

Introduction to HTML5 Canvas

More Related Content

Similar to Introduction to HTML5 Canvas

Recently uploaded

Introduction to HTML5 Canvas