Canvas5 Drawing and Animation 
HTML 
Presenter: Ashim Das, Mindfire Solutions 
Skype: mfsi_ashim 
Date: 13/11/2013
Reference
The Canvas Element
Use document.getElementById() to get a 
reference to canvas 
Call getContext('2d') on the canvas to get the 
graphics co...
The Canvas API 
Canvas attributes 
width 
height 
Canvas methods 
getContext() 
toDataURL(type, quality) 
toBlob(call...
The Canvas Context 
Although the context provides 2d graphics context, the 
Canvas specification embraces other types of c...
Event Handling 
Mouse Events 
canvas.onmousedown = function(e) { 
//mouse down event reaction 
}; 
or 
canvas.addEventList...
Event Handling 
Keyboard Events 
Key Events 
keydown 
keypress 
keyup 
var key = String.fromCharCode(event.which); 
Touch ...
Invisible HTML Elements 
Rubber band with a floating div 
Printing a canvas 
Using toDataURL() to print a canvas
Drawing
The Coordinate System
Transformation 
Translate 
Rotate 
Scale 
Create custom transformations, such as shear
The Drawing Model 
Draws the shape or image into an infinite, transparent bitmap, 
honoring the current fill, stroke, and...
Drawing Rectangles 
clearRect(double x, double y, double w, double h) 
strokeRect(double x, double y, double w, double h...
Gradients 
Linear Gradients 
createLinearGradient( 
double x0, double y0, 
double x1, double y1) 
Radial Gradients 
create...
Patterns 
createPattern(HTMLImageElement | HTMLCanvasElement | 
HTMLVideoElement image, DOMString repetition)
Shadows 
shadowColor: a CSS3 color 
shadowOffsetX: the horizontal offset in pixels from shape 
or text to the shadow 
s...
Paths, Stroking, and Filling
Cutouts
Lines 
moveTo(x, y) 
lineTo(x, y) 
Drawing a Grid
Rubberband Lines 
Dashed Lines
Line Caps and Joins
Arcs and Circles 
arc(x, y, radius, startAngle, endAngle, counterClockwise) 
Rubberband Circles 
Rounded Rectangles (the a...
Dials and Gauges
Bezier Curves 
quadraticCurveTo(double 
cpx, double cpy, double x, 
double y) 
Rounded corners with bezier 
curves
Cubic Curves 
bezierCurveTo(double cpx, double cpy, double cp2x, double 
cp2y, double x, double y)
Transformations 
rotate(double angleInRadians) 
scale(double x, double y) 
translate(double x, double y) 
Custom Transform...
Text
Methods 
rotate(double angleInRadians) 
scale(double x, double y) 
translate(double x, double y) 
Properties 
font 
textAl...
Stroking and Filling Text
Text Patterns and Gradients
Setting Font Properties 
font-style 
font-variant 
font-weight 
font-size 
line-height 
font-family
Positioning Text 
textAlign 
textBaseline
Text around arcs
Text cursors
Animation
The requestAnimationFrame() 
method 
function animate(time) { 
// Update and draw animation objects 
requestAnimationFrame...
Portable Animation loop 
The requestAnimationFrame() polyfill
Scrolling Backgrounds
Parallax
Timed Animation
Thank 
You
Upcoming SlideShare
Loading in...5
×

Html5 Canvas Drawing and Animation

812

Published on

Published in: Software
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
812
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
21
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Html5 Canvas Drawing and Animation

  1. 1. Canvas5 Drawing and Animation HTML Presenter: Ashim Das, Mindfire Solutions Skype: mfsi_ashim Date: 13/11/2013
  2. 2. Reference
  3. 3. The Canvas Element
  4. 4. Use document.getElementById() to get a reference to canvas Call getContext('2d') on the canvas to get the graphics context Use the context to draw in the canvas
  5. 5. The Canvas API Canvas attributes width height Canvas methods getContext() toDataURL(type, quality) toBlob(callback, type, args...)
  6. 6. The Canvas Context Although the context provides 2d graphics context, the Canvas specification embraces other types of contexts as well; for example, a 3d context specification is already well underway. CanvasRenderingContext2D attributes canvas miterLimit fillStyle shadowBlur font shadowColor globalAlpha shadowOffsetX globalComposite-Operation shadowOffsetY lineCap strokeStyle lineWidth textAlign lineJoin textBaseline
  7. 7. Event Handling Mouse Events canvas.onmousedown = function(e) { //mouse down event reaction }; or canvas.addEventListener('mousedown', function(e) { //mouse down event reaction });
  8. 8. Event Handling Keyboard Events Key Events keydown keypress keyup var key = String.fromCharCode(event.which); Touch Events touchstart touchmove touchend touchcancel canvas.ontouchstart = function(e) {….....
  9. 9. Invisible HTML Elements Rubber band with a floating div Printing a canvas Using toDataURL() to print a canvas
  10. 10. Drawing
  11. 11. The Coordinate System
  12. 12. Transformation Translate Rotate Scale Create custom transformations, such as shear
  13. 13. The Drawing Model Draws the shape or image into an infinite, transparent bitmap, honoring the current fill, stroke, and line styles. Draws the shadow from the shape or image into a second bitmap, using the current context shadow settings. Multiplies every shadow pixel's alpha component by the globalAlpha property of the context. Composites the shadow bitmap into the canvas clipped to the clipping region, using the current composition. Multiplies every pixel for the shape or image by the globalAlpha property of the context. Composites the shape or image bitmap into the clipping region over the current canvas bitmap, using the current composition operator.
  14. 14. Drawing Rectangles clearRect(double x, double y, double w, double h) strokeRect(double x, double y, double w, double h) fillRect(double x, double y, double w, double h) Colors and Transparency
  15. 15. Gradients Linear Gradients createLinearGradient( double x0, double y0, double x1, double y1) Radial Gradients createRadialGradient( double x0, double y0, double r0, double x1, double y1, double r1)
  16. 16. Patterns createPattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image, DOMString repetition)
  17. 17. Shadows shadowColor: a CSS3 color shadowOffsetX: the horizontal offset in pixels from shape or text to the shadow shadowOffsetY: the vertical offset in pixels from shape or text to the shadow shadowBlur: a value, used in a Gaussian blur equation to smear the shadow Inset Shadows Negative values in OffSet
  18. 18. Paths, Stroking, and Filling
  19. 19. Cutouts
  20. 20. Lines moveTo(x, y) lineTo(x, y) Drawing a Grid
  21. 21. Rubberband Lines Dashed Lines
  22. 22. Line Caps and Joins
  23. 23. Arcs and Circles arc(x, y, radius, startAngle, endAngle, counterClockwise) Rubberband Circles Rounded Rectangles (the arcTo() method)
  24. 24. Dials and Gauges
  25. 25. Bezier Curves quadraticCurveTo(double cpx, double cpy, double x, double y) Rounded corners with bezier curves
  26. 26. Cubic Curves bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y)
  27. 27. Transformations rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Custom Transformations transform(double a, double b, double c, double d, double e, double f) setTransform(double a, double b, double c, double d, double e, double f)
  28. 28. Text
  29. 29. Methods rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Properties font textAlign textBaseline
  30. 30. Stroking and Filling Text
  31. 31. Text Patterns and Gradients
  32. 32. Setting Font Properties font-style font-variant font-weight font-size line-height font-family
  33. 33. Positioning Text textAlign textBaseline
  34. 34. Text around arcs
  35. 35. Text cursors
  36. 36. Animation
  37. 37. The requestAnimationFrame() method function animate(time) { // Update and draw animation objects requestAnimationFrame(animate); // Sustain the animation } ... requestAnimationFrame(animate); // Start the animation long window.requestAnimationFrame(FrameRequestCallback callback) void window.cancelRequestAnimationFrame(long handle)
  38. 38. Portable Animation loop The requestAnimationFrame() polyfill
  39. 39. Scrolling Backgrounds
  40. 40. Parallax
  41. 41. Timed Animation
  42. 42. 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.

×