HTML5 INTERACTIVE WEB SITES LESSON 7 LECTURE CANVAS CS 50.12 :: Fall 2013 :: Corrine Haverinen Santa Rosa Junior College WHAT IS CANVAS? HTML5 element to draw 2D graphics on a web page without the use of plugins like Flash or Java 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 Safari and Google Chrome deceptively simple API ­ can revolutionize how we build web applications for all devices, not just desktops 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 Every Time Zone HTML5 book 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 CANVAS TOOLS Rectangles Arcs Paths and line drawing Bezier and quadratic curves CANVAS EFFECTS Fills and strokes Shadows Linear and radial gradients Alpha transparency Compositing CANVAS TRANSFORMATIONS Scaling Rotation Translation Transformation matrix 2 DRAWING APIS ­ CANVAS VS SVG 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 event handlers 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 of having to write more code With Canvas, animations are not built in, with SVG effects such as animations are built in MORE CANVAS VS SVG Use SVG when you have existing shapes that you want to render to the screen, like a map that came out of Adobe Illustrator Canvas elements are drawn programmatically, SVG elements are part of the page's DOM Canvas has accessibility issues see WebAim site for proper use see also HTML5 Canvas Accessibility in Firefox 13 BROWSER SUPPORT FOR CANVAS Desktop Browser Version Mobile Browser Version Safari 3.0+ iOS all Chrome 10+ webOS all Opera 9+ Android 2.0+ FireFox 4.0+ BlackBerry Playbook and OS 6.0+ Internet Explorer 9.0+ Windows Phone 7 none SUPPORTING OLDER BROWSERS FlashCanvas ­ relies on Flash as a backup translates canvas code into a Flash graphic layer Silverlight + library called html5canvas ExplorerCanvas library TO USE CANVAS, YOU'LL NEED 2 THINGS A Canvas tag in the HTML to place the drawing canvas just a container for the graphics JavaScript to do the drawing CANVAS TAG Use <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 CSS The canvas area is invisible, style it to initially know where it is on page, before putting in JavaScript Cannot affect the Canvas contents with CSS Can use CSS to modify its position, assign it a background color or image, add a border canvas { 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 file Use <script> </script> tags to surround the JavaScript lang="text/JavaScript" is no longer needed best practice to place in separate file for code reuse many 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 ID window.onload = draw; function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { // canvas.getContext is HTML5 DOM var 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); } }.