1 / 13

Austin JavaScript Meetup

Austin JavaScript Meetup. Interactive Drawing. Agenda. Introduction Browser Graphics Background Canvas intro Canvas examples paper.js drawing library General JavaScript Discussion Q&A. Drawing in the Browser. DOM / CSS Plugins Flash Silverlight JavaFX Vector Graphics SVG

cosima
Download Presentation

Austin JavaScript Meetup

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Austin JavaScript Meetup Interactive Drawing

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

  3. Drawing in the Browser • DOM / CSS • Plugins • Flash • Silverlight • JavaFX • Vector Graphics • SVG • VML (IE) • Canvas Element • 2D Context • WebGL Context

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

  5. 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."

  6. 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)

  7. 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

  8. Canvas Coordinate System • Origin at top left • Positive X : Right • Positive Y : Down

  9. 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 varctx = canvas.getContext('2d');

  10. 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();

  11. Coordinate Transformations // transformations are done on the coordinate system // translate everything up 20 and right 30 ctx.translate(30,-20); // rotate the coordinate system 30 deg clockwise ctx.rotate(Math.PI/6); // scale everything by a factor of 3 in X and 5 in Y ctx.scale(3,5);

  12. 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(); })();

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

More Related