Austin JavaScript Meetup Interactive Drawing

1

Agenda

• • • Introduction Browser Graphics – Background – Canvas intro – Canvas examples – paper.js drawing library General JavaScript Discussion Q&A 2

Drawing in the Browser

• • • • DOM / CSS Plugins – Flash – – Silverlight JavaFX Vector Graphics – SVG – VML (IE) Canvas Element – 2D Context – WebGL Context 3

Focus on Canvas 2D Context

• • • • DOM / CSS Plugins – Flash – – Silverlight JavaFX Vector Graphics – SVG – VML (IE) Canvas Element – 2D Context – WebGL Context 4

From the HTML Spec

• "The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly." 5

Canvas Element

• • • • A rectangular drawing surface No markup/DOM All drawing is done via JavaScript API – API's exist for different contexts (e.g. '2d' context) 2D Context is a W3C Working Draft – http://dev.w3.org/html5/2dcontext/ – Implemented in all modern browsers (yes, IE9+) – IE6-8 can polyfill with excanvas.js (uses VML) 6

Rendering

• • All drawing operations are composited – Flattened to a single bitmap raster – No layers, DOM are maintained Conceptually like drawing on a physical canvas – Choose paintbrush color, thickness, etc 7

Canvas Coordinate System

• • • Origin at top left Positive X : Right Positive Y : Down 8

Prepare the Canvas

// create a canvas element var canvas = document.createElement('canvas'); // give it a height and width (defaults to 300x150) canvas.setAttribute('id', 'surface'); canvas.setAttribute('height', '500'); canvas.setAttribute('width', '500'); // insert canvas into DOM document.body.innerHTML = null; document.body.appendChild(canvas); // get the canvas 2D context var ctx = canvas.getContext('2d'); 9

Draw on the Canvas

// draw a red rectangle with top left at [100,100] ctx.strokeStyle = 'red'; ctx.strokeRect(100,100,300,200); // draw a blue circle at [50,50] with radius 30 ctx.strokeStyle = 'blue'; ctx.beginPath(); ctx.arc(50,50,30,0,2*Math.PI); ctx.stroke(); 10

Coordinate Transformations

// transformations are done on the

coordinate system

// translate everything up 20 and right 30 ctx.translate(30,-20); // rotate the

coordinate system

ctx.rotate(Math.PI/6); 30 deg clockwise // scale everything by a factor of 3 in X and 5 in Y ctx.scale(3,5); 11

Animation

// move a rectangle along a path (function() { var x = 100; // remember to clear the canvas on each frame function move() { var y = x/10*Math.sin(x/20) + x/2; ctx.clearRect(0,0,500,500); ctx.strokeRect(x,y,150*x/400,80); if (x++<=400) {setTimeout(move, 10);} } move(); })(); 12

Paper.js

• • • • • • Vector graphics on top of canvas Custom canvas DOM Nice API Event handling Easy animation Lots more… 13