HTML5 CANVAS

SAVING INFORMATION

BETWEEN FUNCTION CALLS

Can I keep information between calls to a function?Why would I want to do it?

PossibilitiesStore and retrieve values from the HTML page

Possible but can be cumbersomeHave a javaScript variable OUTSIDE the function Known as a global variable

Snippets for the carouselelem_ illustrates writing to src outside of a form

SAVING INFORMATION

CANVAS

RectanglesArcsLines

Features we won’t look at Images Drag and drop Animation

Widely supported

DRAWING PICTURES IN HTML(AND JAVASCRIPT)

Canvas tag in HTMLId requiredResizing must be done in tag, NOT CSSIf you go outside canvas, no error, just doesn’t show

<canvas id=“c" height="400" width="800"></canvas> JavaScript to DRAW: step by step

HOW TO DO IT

Need to identify the canvas Create a javaScript object that represents the canvas (context) Methods associated with objectvar canvas = document.getElementById(“c");var context = canvas.getContext("2d");

Code needs to wait until loading completes Onload Faster alternative

document.addEventListener('DOMContentLoaded',domloaded,false);function domloaded() {}

Drawn in order of execution

SET UP

Most straightforwardDefine by location of upper left corner and size

Grid is defined with (0,0) as upper left cornercontext. fillRect(x, y, width, height);

Set color and then define the rectanglecontext.fi llStyle = "#EF5B84";context.fi llRect(100, 100, 100, 200);

Color Always a string Same formats as in CSS

Opacity: applies to what followscontext.globalAlpha = 0.5;

RECTANGLES

Circles and arcscontext.arc(x, y, radius, start-angle, end-angle, dir);

Outline (“pencil”) and then draw (“ink”) Pencil

context.beginPath(); context.arc(x, y, radius, 0, Math.PI * 2, false); context.closePath(); /* closes the shape */

Fillcontext.fi llStyle = "#000"; context.fi ll();

Inkcontext.strokeStyle = "#000"; context.stroke();

ARCS

Pencil up, pencil downStart (same as arcs)

context.beginPath();Position

context.moveTo(x,y);Draw (pencil)

context.lineTo(x,y); If you want to close the shape (same as arcs)

context.closePath(); Ink (same as arc)

context.strokeStyle = "#000"; context.stroke();

LINES

Mark Pilgrim, Dive into HTML5 Chapter 4: Let’s Call it a Draw(ing Surface)

HTML5 Canvas Basic Tutorials

RESOURCES