HTML5INTERACTIVE WEB SITES

LESSON 7 LECTURECANVAS

CS 50.12 :: Fall 2013 :: Corrine HaverinenSanta Rosa Junior College

WHAT IS CANVAS?HTML5 element to draw 2D graphics on a web page without the use of plugins like Flash orJava

3D version called WebGL 3D ­ still being developed, browser support is poor

first introduced by Apple for the Mac OS X Dashboard widgets and later implemented in Safariand Google Chrome

deceptively simple API ­ can revolutionize how we build web applications for all devices, not justdesktops

There is no file format, and you can only draw using script

can draw lines, shapes, images, text, curves, arcs

WHAT TO USE CANVAS FOR?Simple diagrams

Fancy user interfaces

Animations

Charts and graphs (animate them)

Embedded drawing applications

Real­time video processing or rendering

Working around CSS limitations

Great for Games

CANVAS EXAMPLES

HTML5 book 

CANVAS TOOLSRectangles

Arcs

Paths and line drawing

Bezier and quadratic curves

CANVAS EFFECTSFills and strokes

Shadows

Linear and radial gradients

Alpha transparency

Compositing

CANVAS TRANSFORMATIONSScaling

Rotation

Translation

Transformation matrix

2 DRAWING APIS ­ CANVAS VS SVG

Every Time Zone

20 Things I Leaned About Browsers and the Web

Canvas Zoom

Pie Chart

Bar Chart

Raphaël JavaScript Library

The Wilderness Downtown ­ Arcade Fire

21 Ridiculously Impressive HTML5 Canvas Experiments

Desktop Browser Version

Safari 3.0+

Chrome 10+

Opera 9+

FireFox 4.0+

Internet Explorer 9.0+

Mobile Browser Version

iOS all

webOS all

Android 2.0+

BlackBerry Playbook 

and OS 6.0+

Windows Phone 7 none

Canvas renders as pixels, SVG renders as vectors

SVG is a vector API that draws shapes. Each shape has an object that you can attach eventhandlers to. If you zoom in the shape stays smooth, whereas Canvas would become pixelated.

With Canvas you have more control over the drawing and use less memory, but at the cost ofhaving to write more code

With Canvas, animations are not built in, with SVG effects such as animations are built in

MORE CANVAS VS SVGUse SVG when you have existing shapes that you want to render to the screen, like a map thatcame out of Adobe Illustrator

Canvas elements are drawn programmatically, SVG elements are part of the page's DOM

Canvas has accessibility issuessee see also 

BROWSER SUPPORT FOR CANVAS

SUPPORTING OLDER BROWSERS ­ relies on Flash as a backup

translates canvas code into a Flash graphic layer

TO USE CANVAS, YOU'LL NEED 2 THINGS

WebAim site for proper useHTML5 Canvas Accessibility in Firefox 13

FlashCanvas

Silverlight + library called html5canvas

ExplorerCanvas library

A Canvas tag in the HTML to place the drawing canvasjust a container for the graphics

JavaScript to do the drawing

CANVAS TAGUse <canvas> element with closing </canvas>

Include alternative text in case browser doesn't support

Specify width and height or by default the canvas area will be 300 px wide by 150 px high<canvas id="canvas" width="500" height="500"><p>Your browser doesn't support canvas.</p></canvas>

STYLE CANVAS TAG WITH CSSThe canvas area is invisible, style it to initially know where it is on page, before putting inJavaScript

Cannot affect the Canvas contents with CSS

Can use CSS to modify its position, assign it a background color or image, add a bordercanvas {border: 2px dotted blue;}

HELLO WORLD EXAMPLE IN BOOK<canvas>your browsers does not support the canvas element</canvas><script>var ctx = document.querySelector('canvas').getContext('2d');ctx.fillStyle = 'rgb(0, 255, 0)';ctx.fillRect(10, 20, 50, 50);ctx.strokeStyle = 'rgb(0, 182, 0)';ctx.lineWidth = 5;ctx.strokeRect(9, 19, 52, 52);</script>

CANVAS JAVASCRIPT

Can include JavaScript in same file or separate .js fileUse <script> </script> tags to surround the JavaScriptlang="text/JavaScript" is no longer neededbest practice to place in separate file for code reusemany examples put JavaScript right in the body next to Canvas tag

For validatation and to load page before canvas, use:window.onload = function;

Example:window.onload = draw;function draw() {// code}

EXAMPLE USING WINDOW.ONLOAD AND IDwindow.onload = draw;function draw() {var canvas = document.getElementById("canvas");if (canvas.getContext) {// canvas.getContext is HTML5 DOMvar canvas_context = canvas.getContext("2d");canvas_context.fillStyle = "rgb(200,0,0)";canvas_context.fillRect(10, 10, 300, 300);canvas_context.strokeRect(10, 10, 400, 400);}}