Your SlideShare is downloading. ×
0
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Canvas - The Future of Graphics on the Web

89,287

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.

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
34 Comments
175 Likes
Statistics
Notes
  • very cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool cool !!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool cool !!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool cool !!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool cool !!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
89,287
On Slideshare
0
From Embeds
0
Number of Embeds
79
Actions
Shares
0
Downloads
3,043
Comments
34
Likes
175
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×