html5 canvas drawing and animation

HTML Presenter: Ashim Das, Mindfire SolutionsSkype: mfsi_ashim

Canvas5Drawing and Animation

The Canvas Element

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

The Canvas APICanvas attributeswidthheight

Canvas methodsgetContext()toDataURL(type, quality)toBlob(callback, type, args...)

The Canvas ContextAlthough 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 attributescanvas miterLimitfillStyle shadowBlurfont shadowColorglobalAlpha shadowOffsetXglobalComposite-Operation shadowOffsetYlineCap strokeStylelineWidth textAlignlineJoin textBaseline

Event HandlingMouse Eventscanvas.onmousedown = function(e) {

//mouse down event reaction};

or

canvas.addEventListener('mousedown', function(e) {//mouse down event reaction

});

Event HandlingKeyboard EventsKey Eventskeydownkeypresskeyup

var key = String.fromCharCode(event.which);

Touch Eventstouchstarttouchmovetouchendtouchcancelcanvas.ontouchstart = function(e) {….....

Invisible HTML ElementsRubber band with a floating div

Printing a canvasUsing toDataURL() to print a canvas

Drawing

The Coordinate System

TransformationTranslateRotateScaleCreate custom transformations, such as shear

The Drawing ModelDraws 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.

Drawing RectanglesclearRect(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

GradientsLinear Gradients

Radial Gradients

createLinearGradient(double x0, double y0, double x1, double y1)

createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1)

PatternscreatePattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image, DOMString repetition)

ShadowsshadowColor: a CSS3 colorshadowOffsetX: the horizontal offset in pixels from shape

or text to the shadowshadowOffsetY: the vertical offset in pixels from shape or

text to the shadowshadowBlur: a value, used in a Gaussian blur equation to

smear the shadow

Inset ShadowsNegative values in OffSet

Paths, Stroking, and Filling

Cutouts

LinesmoveTo(x, y)lineTo(x, y)

Drawing a Grid

Rubberband Lines

Dashed Lines

Line Caps and Joins

Arcs and Circlesarc(x, y, radius, startAngle, endAngle, counterClockwise)

Rubberband CirclesRounded Rectangles (the arcTo() method)

Dials and Gauges

Bezier Curves

Rounded corners with bezier curves

quadraticCurveTo(double cpx, double cpy, double x, double y)

Cubic CurvesbezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y)

Transformationsrotate(double angleInRadians)scale(double x, double y)translate(double x, double y)

Custom Transformationstransform(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)

Text

rotate(double angleInRadians)scale(double x, double y)translate(double x, double y)

Methods

PropertiesfonttextAligntextBaseline

Stroking and Filling Text

Text Patterns and Gradients

Setting Font Propertiesfont-stylefont-variantfont-weightfont-sizeline-heightfont-family

Positioning TexttextAligntextBaseline

Text around arcs

Text cursors

Animation

The requestAnimationFrame() methodfunction animate(time) {// Update and draw animation objectsrequestAnimationFrame(animate); // Sustain the animation}...requestAnimationFrame(animate); // Start the animation

long window.requestAnimationFrame(FrameRequestCallback callback)void window.cancelRequestAnimationFrame(long handle)

Portable Animation loopThe requestAnimationFrame() polyfill

Scrolling Backgrounds

Parallax

Timed Animation

Thank You

www.mindfiresolutions.com