CANVAS
introduction to:
Tuesday, September 3, 13
Mark J. Morris
@blurredbits
presented by:
September 3, 2013
Tuesday, September 3, 13
“Added in HTML5, the HTML <canvas> element is an element which can be
used to draw graphics via scripting (usually Javascr...
Chrome 25+
Firefox 20+
Safari 5+
IE 9.0+
Opera 9.0+
Tuesday, September 3, 13
index.html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Intro</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
...
index.html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Intro</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
...
index.html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Intro</title>
<link rel=”stylesheet” href=”css/style.css”>
</head>
...
Tuesday, September 3, 13
Tuesday, September 3, 13
Tuesday, September 3, 13
basic canvas method
fillRect(float x, float y, float width, float height)
Tuesday, September 3, 13
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
var theCanvas =
document.getElementById(‘intro’).getCo...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
var theCanvas =
document.getElementById(‘intro’).getCo...
theCanvas.fillStyle = “orange”;
theCanvas.fillStyle = “#FFA500”;
theCanvas.fillStyle = “rgb(255,165,0)”;
theCanvas.fillSty...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
var theCanvas =
document.getElementById(‘intro’).getCo...
Tuesday, September 3, 13
Text Methods
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.fillStyle = "blue";
! theCanvas.font = "...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.fillStyle = "blue";
! theCanvas.font = "...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.fillStyle = "blue";
! theCanvas.font = "...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.fillStyle = "blue";
! theCanvas.font = "...
Tuesday, September 3, 13
Line Methods
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.beginPath();
! theCanvas.moveTo(50, 25);...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.beginPath();
! theCanvas.moveTo(50, 25);...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.beginPath();
! theCanvas.moveTo(50, 25);...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.beginPath();
! theCanvas.moveTo(50, 25);...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.beginPath();
! theCanvas.moveTo(50, 25);...
Tuesday, September 3, 13
(2,1)
(2,4)
Tuesday, September 3, 13
(1.5,1)
(1.5,4)
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
!
! theCanvas.beginPath();
! theCanvas.moveTo(50.5, 25...
Tuesday, September 3, 13
arcs
arc(x, y, radius, startAngle, endAngle, anticlockwise)
bezier
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
quadratic
q...
Image Methods
Tuesday, September 3, 13
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
! var img = new Image();
img.src = 'https://mdn.mozill...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
! var img = new Image();
img.src = 'https://mdn.mozill...
js/canvas.js
window.onload = canvasApp();
function canvasApp () {
}
! var img = new Image();
img.src = 'https://mdn.mozill...
Tuesday, September 3, 13
scaling
drawImage(image, x, y, width, height)
slicing
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
T...
Gradients
Animations
Patterns
Shadows
Transformations
Compositing
Video
Audio
Tuesday, September 3, 13
Additional Resources
Tuesday, September 3, 13
Tuesday, September 3, 13
Tuesday, September 3, 13
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
Tuesday, September 3, 13
Thursday 9/5
6:00pm
Crooked Cup
Tuesday, September 3, 13
Mark J. Morris
@blurredbits
Thanks!
Tuesday, September 3, 13
Upcoming SlideShare
Loading in...5
×

Introduction to HTML5 Canvas

1,364

Published on

Delivered to Fort Collins Internet Pros Meetup Group - Sept 3, 2013.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,364
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to HTML5 Canvas

  1. 1. CANVAS introduction to: Tuesday, September 3, 13
  2. 2. Mark J. Morris @blurredbits presented by: September 3, 2013 Tuesday, September 3, 13
  3. 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. 4. Chrome 25+ Firefox 20+ Safari 5+ IE 9.0+ Opera 9.0+ Tuesday, September 3, 13
  5. 5. index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <link rel=”stylesheet” href=”css/style.css”> </head> <body> <script src=”js/canvas.js”></script> </body> </html> Tuesday, September 3, 13
  6. 6. index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <link rel=”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. 7. index.html <!DOCTYPE html> <html> <head> <title>Canvas Intro</title> <link rel=”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. 8. Tuesday, September 3, 13
  9. 9. Tuesday, September 3, 13
  10. 10. Tuesday, September 3, 13
  11. 11. basic canvas method fillRect(float x, float y, float width, float height) Tuesday, September 3, 13
  12. 12. Tuesday, September 3, 13
  13. 13. js/canvas.js window.onload = canvasApp(); function canvasApp () { } var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); theCanvas.fillStyle = "rgb(160, 160, 160)"; theCanvas.fillRect(0, 0, 50, 50); Tuesday, September 3, 13
  14. 14. js/canvas.js window.onload = canvasApp(); function canvasApp () { } var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); theCanvas.fillStyle = "rgb(160, 160, 160)"; theCanvas.fillRect(0, 0, 50, 50); Tuesday, September 3, 13
  15. 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. 16. js/canvas.js window.onload = canvasApp(); function canvasApp () { } var theCanvas = document.getElementById(‘intro’).getContext(‘2d’); theCanvas.fillStyle = "rgb(160, 160, 160)"; theCanvas.fillRect(0, 0, 50, 50); Tuesday, September 3, 13
  17. 17. Tuesday, September 3, 13
  18. 18. Text Methods Tuesday, September 3, 13
  19. 19. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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. 20. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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
  21. 21. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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
  22. 22. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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
  23. 23. Tuesday, September 3, 13
  24. 24. Line Methods Tuesday, September 3, 13
  25. 25. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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. 26. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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
  27. 27. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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
  28. 28. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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
  29. 29. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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
  30. 30. Tuesday, September 3, 13
  31. 31. (2,1) (2,4) Tuesday, September 3, 13
  32. 32. (1.5,1) (1.5,4) Tuesday, September 3, 13
  33. 33. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! ! 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. 34. Tuesday, September 3, 13
  35. 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. 36. Image Methods Tuesday, September 3, 13
  37. 37. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! 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. 38. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! 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
  39. 39. js/canvas.js window.onload = canvasApp(); function canvasApp () { } ! 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
  40. 40. Tuesday, September 3, 13
  41. 41. scaling drawImage(image, x, y, width, height) slicing drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) Tuesday, September 3, 13
  42. 42. Gradients Animations Patterns Shadows Transformations Compositing Video Audio Tuesday, September 3, 13
  43. 43. Additional Resources Tuesday, September 3, 13
  44. 44. Tuesday, September 3, 13
  45. 45. Tuesday, September 3, 13
  46. 46. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial Tuesday, September 3, 13
  47. 47. Thursday 9/5 6:00pm Crooked Cup Tuesday, September 3, 13
  48. 48. Mark J. Morris @blurredbits Thanks! Tuesday, September 3, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×