1. Canvas5 Drawing and Animation
HTML
Presenter: Ashim Das, Mindfire Solutions
Skype: mfsi_ashim
Date: 13/11/2013

2. Reference

3. The Canvas Element

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. The Canvas API
Canvas attributes
width
height
Canvas methods
getContext()
toDataURL(type, quality)
toBlob(callback, type, args...)

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. Event Handling
Mouse Events
canvas.onmousedown = function(e) {
//mouse down event reaction
};
or
canvas.addEventListener('mousedown', function(e) {
//mouse down event reaction
});

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. Invisible HTML Elements
Rubber band with a floating div
Printing a canvas
Using toDataURL() to print a canvas

10. Drawing

11. The Coordinate System

12. Transformation
Translate
Rotate
Scale
Create custom transformations, such as shear

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. 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. 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. Patterns
createPattern(HTMLImageElement | HTMLCanvasElement |
HTMLVideoElement image, DOMString repetition)

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. Paths, Stroking, and Filling

19. Cutouts

20. Lines
moveTo(x, y)
lineTo(x, y)
Drawing a Grid

21. Rubberband Lines
Dashed Lines

22. Line Caps and Joins

23. Arcs and Circles
arc(x, y, radius, startAngle, endAngle, counterClockwise)
Rubberband Circles
Rounded Rectangles (the arcTo()
method)

24. Dials and Gauges

25. Bezier Curves
quadraticCurveTo(double
cpx, double cpy, double x,
double y)
Rounded corners with bezier
curves

26. Cubic Curves
bezierCurveTo(double cpx, double cpy, double cp2x, double
cp2y, double x, double y)

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. Text

29. Methods
rotate(double angleInRadians)
scale(double x, double y)
translate(double x, double y)
Properties
font
textAlign
textBaseline

30. Stroking and Filling Text

31. Text Patterns and Gradients

32. Setting Font Properties
font-style
font-variant
font-weight
font-size
line-height
font-family

33. Positioning Text
textAlign
textBaseline

34. Text around arcs

35. Text cursors

36. Animation

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. Portable Animation loop
The requestAnimationFrame() polyfill

39. Scrolling Backgrounds

40. Parallax

41. Timed Animation

42. Thank
You