HTML5 Canvas

    The Future of
 Graphics on the Web
Rob Hawkes
         @robhawkes for you social media folk
         rawkes.com if you want to see more


The  place  to  be ...
“Canvas is my favourite part
  of HTML5, alongside its
 video and audio support”
                Myself, at some point
So what is canvas?
An overview of canvas

✽   2D drawing platform within the browser
✽   Uses nothing more than JavaScript and
    HTML – no ...
Bitmap vs. vector
✽   Canvas is a bitmap system
    •   Everything is drawn as a single, flat, picture
    •   Changes requ...
Browser support
✽   Most modern browsers
    •   Safari
    •   Chrome
    •   Firefox
    •   Opera

✽   No Internet Expl...
What is it for?
Data visualisation
Animated graphics
Web applications
Games
Here’s something I made earlier
Getting started
Created using the new HTML5 tag



<canvas height=”600” width=”800”></canvas>



      Height  and  width  need  to  be  s...
(0,0)
              x




    y




Uses the standard screen-based
       coordinate system
Everything is drawn onto the
          2D rendering context (ctx)




               2D rendering context
Canvas
Use getContext() to access the
           2D rendering context



var canvas = document.getElementById("canvas");
var ctx ...
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';



                         Use  RGBA  for  al...
Simple shapes

Method                   Action
fillRect(x, y, w, h)      Draws a rectangle using the current fill style

str...
ctx.fillStyle = ‘rgb(65, 60, 50)’;
ctx.fillRect(25, 50, 100, 100);

ctx.strokeStyle = ‘rgb(65, 60, 50)’;
ctx.strokeRect(13...
Complex shapes & paths
✽   Paths are a list of subpaths
✽   Subpaths are one or more points
    connected by straight or c...
Complex shapes & paths

Method         Action
beginPath()    Resets the current path

closePath()    Closes the current su...
Complex shapes & paths

Method                          Action
lineTo(x, y)                    Draws a straight line from ...
ctx.strokeStyle = ‘rgb(65, 60, 50)’;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();



         ...
ctx.fillStyle = ‘rgb(65, 60, 50)’;
ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI*2, true);
ctx.fill();




           ...
ctx.strokeStyle = ‘rgb(65, 60, 50)’;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(70, 50, 130, 150, 150, 100);
...
Other cool stuff

✽   Text
✽   Shadows & blurring
✽   Line styles; width, cap, etc.
✽   Saving state of drawing context
✽ ...
Pixel manipulation
Images can be drawn onto the canvas

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dw, dh);
ctx.drawImage(ima...
Individual pixel values can be retrieved


           ctx.getImageData(sx, sy, sw, sh);




      sy

 sx

               ...
Canvas ambilight
Making things move
Harnessing the power

✽   Remember all the shapes on the canvas
✽   Move them, transform them, and make
    them interact
...
My workflow
✽   Treat each shape as a JavaScript object
✽   Each shape object has position values
✽   Store the shape obje...
The future of canvas
The future of canvas
✽   OOP programming allows much to be
    achieved through canvas
✽   It’s flexible and powerful
    •...
Is it a Flash killer?
Canvas vs. Flash
✽   Canvas will flourish with future
    development of frameworks
✽   Its animation capabilities are only...
Thank you!
Upcoming SlideShare
Loading in …5
×

HTML5 Canvas - The Future of Graphics on the Web

92,386
-1

Published on

These are the slides from my presentation at Barcamp Bournemouth on HTML5 canvas and why I believe it is the future of graphics on the Web.

Published in: Technology
35 Comments
178 Likes
Statistics
Notes
No Downloads
Views
Total Views
92,386
On Slideshare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
3,149
Comments
35
Likes
178
Embeds 0
No embeds

No notes for slide

HTML5 Canvas - The Future of Graphics on the Web

  1. HTML5 Canvas The Future of Graphics on the Web
  2. Rob Hawkes @robhawkes for you social media folk rawkes.com if you want to see more The  place  to  be Yes,  that’s  me looking  horrible AKA.  Layabout Guess  my middle  name
  3. “Canvas is my favourite part of HTML5, alongside its video and audio support” Myself, at some point
  4. So what is canvas?
  5. An overview of canvas ✽ 2D drawing platform within the browser ✽ Uses nothing more than JavaScript and HTML – no plugins ✽ Extensible through a JavaScript API ✽ Created by Apple for dashboard widgets ✽ Now openly developed as a W3C spec
  6. Bitmap vs. vector ✽ Canvas is a bitmap system • Everything is drawn as a single, flat, picture • Changes require the whole picture to be redrawn ✽ SVG is a vector system • Elements to be drawn are separate DOM objects • They can be manipulated individually ✽ SVG isn’t part of HTML5 • Future isn’t as rosy as canvas’
  7. Browser support ✽ Most modern browsers • Safari • Chrome • Firefox • Opera ✽ No Internet Explorer support by default • However, there are hacks to get it working
  8. What is it for?
  9. Data visualisation
  10. Animated graphics
  11. Web applications
  12. Games
  13. Here’s something I made earlier
  14. Getting started
  15. Created using the new HTML5 tag <canvas height=”600” width=”800”></canvas> Height  and  width  need  to  be  set  explicitly
  16. (0,0) x y Uses the standard screen-based coordinate system
  17. Everything is drawn onto the 2D rendering context (ctx) 2D rendering context Canvas
  18. Use getContext() to access the 2D rendering context var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); This  is  your  friend
  19. ctx.fillStyle = 'rgb(255, 0, 0)'; ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)'; Use  RGBA  for  alpha transparency fillStyle() and strokeStyle() define the style of shapes to be drawn
  20. Simple shapes Method Action fillRect(x, y, w, h) Draws a rectangle using the current fill style strokeRect(x, y, w, h) Draws the outline of a rectangle using the current stroke style clearRect(x, y, w, h) Clears all pixels within the given rectangle Simple shapes are drawn without effecting the current path
  21. ctx.fillStyle = ‘rgb(65, 60, 50)’; ctx.fillRect(25, 50, 100, 100); ctx.strokeStyle = ‘rgb(65, 60, 50)’; ctx.strokeRect(130, 500, 40, 70); 500 130
  22. Complex shapes & paths ✽ Paths are a list of subpaths ✽ Subpaths are one or more points connected by straight or curved lines ✽ Rendering context always has a current path ✽ A new path should be created for each individual shape
  23. Complex shapes & paths Method Action beginPath() Resets the current path closePath() Closes the current subpath and starts a new one moveTo(x, y) Creates a new subpath at the given point fill() Fills the subpaths with the current fill style stroke() Outlines the subpaths with the current stroke style
  24. Complex shapes & paths Method Action lineTo(x, y) Draws a straight line from the previous point rect(x, y, w, h) Adds a new closed rectangular subpath arc(x, y, radius, startAngle, Adds a subpath along the circumference of endAngle, anticlockwise) the described circle, within the angles defines arcTo(x1, y1, x2, y2, radius) Adds a subpath connecting two points by an arc of the defined radius bezierCurveTo(cp1x, cp1y, Adds a cubic Bézier curve with the given cp2x, cp2y, x, y) control points quadraticCurveTo(cpx, Adds a quadratic Bézier curve with the given cpy, x, y) control points
  25. ctx.strokeStyle = ‘rgb(65, 60, 50)’; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.stroke(); 50 50 100 100
  26. ctx.fillStyle = ‘rgb(65, 60, 50)’; ctx.beginPath(); ctx.arc(100, 100, 30, 0, Math.PI*2, true); ctx.fill(); 100 100 30
  27. ctx.strokeStyle = ‘rgb(65, 60, 50)’; ctx.beginPath(); ctx.moveTo(50, 100); ctx.bezierCurveTo(70, 50, 130, 150, 150, 100); ctx.stroke(); cp1 100 50 cp2
  28. Other cool stuff ✽ Text ✽ Shadows & blurring ✽ Line styles; width, cap, etc. ✽ Saving state of drawing context ✽ Transformations
  29. Pixel manipulation
  30. Images can be drawn onto the canvas ctx.drawImage(image, dx, dy); ctx.drawImage(image, dx, dy, dw, dh); ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); sy sx sh dy sw dx Canvas dh dw Source image
  31. Individual pixel values can be retrieved ctx.getImageData(sx, sy, sw, sh); sy sx Returns an array sh of pixel values sw
  32. Canvas ambilight
  33. Making things move
  34. Harnessing the power ✽ Remember all the shapes on the canvas ✽ Move them, transform them, and make them interact ✽ Redraw the all the shapes in their new positions ✽ Rinse and repeat, really quickly
  35. My workflow ✽ Treat each shape as a JavaScript object ✽ Each shape object has position values ✽ Store the shape objects in an array ✽ Run a timeout function every 40 ms ✽ Clear the canvas ✽ Make any changes to the shape objects ✽ Loop through and redraw every shape
  36. The future of canvas
  37. The future of canvas ✽ OOP programming allows much to be achieved through canvas ✽ It’s flexible and powerful • Animation engines • Pseudo 3D graphics ✽ Reading pixel values opens a lot of doors ✽ Integration with other HTML5 elements is a killer feature
  38. Is it a Flash killer?
  39. Canvas vs. Flash ✽ Canvas will flourish with future development of frameworks ✽ Its animation capabilities are only just being realised ✽ Flash has tight integration with the offline world, but HTML5 is changing that ✽ There is a gap in the market for a GUI for developing canvas applications
  40. Thank you!
  1. A particular slide catching your eye?

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

×