![Page 1: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/1.jpg)
HTML5 Canvas
The Future ofGraphics on the Web
![Page 2: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/2.jpg)
Rob Hawkes@robhawkes for you social media folkrawkes.com if you want to see more
Yes, that’s melooking horrible
AKA. Layabout
The place to be
Guess mymiddle name
![Page 3: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/3.jpg)
“Canvas is my favourite part of HTML5, alongside its
video and audio support”
Myself, at some point
![Page 4: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/4.jpg)
So what is canvas?
![Page 5: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/5.jpg)
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
![Page 6: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/6.jpg)
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’
![Page 7: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/7.jpg)
Browser support
✽ Most modern browsers• Safari
• Chrome
• Firefox
• Opera
✽ No Internet Explorer support by default• However, there are hacks to get it working
![Page 8: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/8.jpg)
What is it for?
![Page 9: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/9.jpg)
Data visualisation
![Page 10: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/10.jpg)
Animated graphics
![Page 11: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/11.jpg)
Web applications
![Page 12: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/12.jpg)
Games
![Page 13: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/13.jpg)
Here’s something I made earlier
![Page 14: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/14.jpg)
Getting started
![Page 15: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/15.jpg)
<canvas height=”600” width=”800”></canvas>
Created using the new HTML5 tag
Height and width need to be set explicitly
![Page 16: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/16.jpg)
x
y
Uses the standard screen-basedcoordinate system
(0,0)
![Page 17: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/17.jpg)
Everything is drawn onto the2D rendering context (ctx)
Canvas
2D rendering context
![Page 18: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/18.jpg)
var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");
Use getContext() to access the 2D rendering context
This is your friend
![Page 19: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/19.jpg)
fillStyle() and strokeStyle() define the style of shapes to be drawn
ctx.fillStyle = 'rgb(255, 0, 0)';ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
Use RGBA for alphatransparency
![Page 20: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/20.jpg)
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 withouteffecting the current path
![Page 21: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/22.jpg)
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
![Page 23: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/23.jpg)
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
![Page 24: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/24.jpg)
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, endAngle, anticlockwise)
Adds a subpath along the circumference of 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, cp2x, cp2y, x, y)
Adds a cubic Bézier curve with the given control points
quadraticCurveTo(cpx, cpy, x, y)
Adds a quadratic Bézier curve with the given control points
![Page 25: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/25.jpg)
ctx.strokeStyle = ‘rgb(65, 60, 50)’;ctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(100, 100);ctx.stroke();
50
50 100
100
![Page 26: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/26.jpg)
ctx.fillStyle = ‘rgb(65, 60, 50)’;ctx.beginPath();ctx.arc(100, 100, 30, 0, Math.PI*2, true);ctx.fill();
100
100
30
![Page 27: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/27.jpg)
ctx.strokeStyle = ‘rgb(65, 60, 50)’;ctx.beginPath();ctx.moveTo(50, 100);ctx.bezierCurveTo(70, 50, 130, 150, 150, 100);ctx.stroke();
100
50
cp1
cp2
![Page 28: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/28.jpg)
Other cool stuff
✽ Text
✽ Shadows & blurring
✽ Line styles; width, cap, etc.
✽ Saving state of drawing context
✽ Transformations
![Page 29: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/29.jpg)
Pixel manipulation
![Page 30: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/30.jpg)
ctx.drawImage(image, dx, dy);ctx.drawImage(image, dx, dy, dw, dh);ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
Images can be drawn onto the canvas
Sourceimage
Canvas
sysx
sw
sh dy
dx
dh
dw
![Page 31: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/31.jpg)
ctx.getImageData(sx, sy, sw, sh);
Individual pixel values can be retrieved
sy
sx
sh
sw
Returns an array of pixel values
![Page 33: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/33.jpg)
Making things move
![Page 34: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/34.jpg)
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
![Page 35: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/35.jpg)
✽ 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
My workflow
![Page 36: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/36.jpg)
The future of canvas
![Page 37: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/37.jpg)
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
![Page 38: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/38.jpg)
Is it a Flash killer?
![Page 39: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/39.jpg)
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
![Page 40: HTML5 Canvas - The Future of Graphics on the Web](https://reader036.vdocuments.us/reader036/viewer/2022070300/540e06088d7f72927e8b4ac2/html5/thumbnails/40.jpg)
Thank you!