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

HTML5 Canvas - The Future of Graphics on the Web

on

  • 92,465 views

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.

Statistics

Views

Total Views
92,465
Views on SlideShare
78,774
Embed Views
13,691

Actions

Likes
174
Downloads
2,971
Comments
34

189 Embeds 13,691

http://www.pinceladasdaweb.com.br 1984
http://www.slideshare.net 1783
http://rawkes.com 1405
http://testjobs.prod.netflix.com 1020
http://localhost:30320 912
http://blog.dreamcss.com 904
http://blog.caosdevelopers.com 762
http://labs.9lessons.info 721
http://www.mashme.tv 567
http://localhost 559
http://geektheplanet.net 418
http://learni.st 274
http://www.siliconbeachtraining.co.uk 265
http://solomonengel.com 173
http://127.0.0.1 95
http://esouillat.wordpress.com 84
http://www.mace.kr 83
http://techwire.in 78
http://www.techgig.com 69
http://jmateuinformatica.wordpress.com 69
http://localhost:49458 59
http://tkhan.synology.me 59
http://xaviti2011.blogspot.com 58
http://akula83.wordpress.com 58
http://ylcnet.uoregon.edu 52
http://mtv.127-0-0-1.org.uk 51
http://www.weebly.com 47
http://143.mashmetv.appspot.com 46
http://innovation.triinn.cloudngen.com 45
http://hoctudau.com 45
http://innovation.triinn.cloudngen.com 45
http://mashmetv.appspot.com 33
http://localhost:49644 33
http://www.techiegyan.com 32
http://feeds.feedburner.com 28
http://mace.kr 26
http://a0.twimg.com 25
http://onwebdev.blogspot.com 20
http://200.preprommtv.appspot.com 20
http://123.preprommtv.appspot.com 19
http://999.mashmetv.appspot.com 19
http://666.mashmetv.appspot.com 18
http://111.mashmetv.appspot.com 18
http://blog.cachina.com.br 17
http://2105.mashmetv.appspot.com 17
http://pintertest.tumblr.com 16
http://pinterest.com 15
http://gdiazderada001.blogspot.com.es 15
http://www.minnix.info 14
http://hopper.jalios.local 13
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 34 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • very cool
    Are you sure you want to
    Your message goes here
    Processing…
  • cool cool !!!
    Are you sure you want to
    Your message goes here
    Processing…
  • cool cool !!!
    Are you sure you want to
    Your message goes here
    Processing…
  • cool cool !!!
    Are you sure you want to
    Your message goes here
    Processing…
  • cool cool !!!
    Are you sure you want to
    Your message goes here
    Processing…

110 of 34

Post Comment
Edit your comment

HTML5 Canvas - The Future of Graphics on the Web HTML5 Canvas - The Future of Graphics on the Web Presentation Transcript

  • 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 Yes,  that’s  me looking  horrible AKA.  Layabout Guess  my middle  name
  • “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 plugins ✽ Extensible through a JavaScript API ✽ Created by Apple for dashboard widgets ✽ Now openly developed as a W3C spec
  • 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’
  • Browser support ✽ Most modern browsers • Safari • Chrome • Firefox • Opera ✽ No Internet Explorer support by default • However, there are hacks to get it working
  • 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  set  explicitly
  • (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 = canvas.getContext("2d"); This  is  your  friend
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • ctx.strokeStyle = ‘rgb(65, 60, 50)’; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.stroke(); 50 50 100 100
  • ctx.fillStyle = ‘rgb(65, 60, 50)’; ctx.beginPath(); ctx.arc(100, 100, 30, 0, Math.PI*2, true); ctx.fill(); 100 100 30
  • 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
  • Other cool stuff ✽ Text ✽ Shadows & blurring ✽ Line styles; width, cap, etc. ✽ Saving state of drawing context ✽ Transformations
  • Pixel manipulation
  • 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
  • Individual pixel values can be retrieved ctx.getImageData(sx, sy, sw, sh); sy sx Returns an array sh of pixel values sw
  • Canvas ambilight
  • Making things move
  • 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
  • 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
  • The future of canvas
  • 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
  • Is it a Flash killer?
  • 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
  • Thank you!