introduction to canvas and native web vector graphics

© SitePen, Inc. All Rights Reserved

Canvas and Web Vector Graphics

Dylan Schiemann (@dylans)SitePen, Inc.HTML5 Code Camp, October, 2010

Saturday, October 16, 2010


In the beginning, there was ASCII art

<img />

Microsoft and VML

Adobe, the W3C and SVG

Firefox and Opera get native SVG

Firefox, Opera and Safari get canvas

All non-IE browsers get canvas and SVG

IE9: 2011



Topology and Rheology of Quasi Two-Dimensional Foam

1996

http://arxiv.org/pdf/cond-mat/9904101


http://www.physics.upenn.edu/liugroup/pubs/PRE.60.4385.pdf

http://www.physics.upenn.edu/liugroup/pubs/PRE.60.4385.pdf


Raster vs. Vector

Raster: Rectangular grid of pixels

Pre-rendered before runtime (JPG, PNG)

Rendered at runtime (Canvas)

Vector: Mathematical representation of a shape

Rendered at runtime (SVG)



Native vs. Plug-in

Open Protocols

No proprietary player or studio required

Use seamlessly with HTML, CSS, DOM

No install needed

A modular piece of the web rather than trying to replace it



SVG vs. Canvas

SVG CanvasRepresentation Pixels DOM Nodes

Scalability Vector Raster

Syntax/Size Verbose Terse

Event Handling DOM Events Pixel Coords

Browser Support IE9 beta, all majors IE9?, all majors

Mobile Support Many More

Animations JavaScript/SMIL Timers

Accessibility Yes No

Image Save No Yes (PNG or JPG)

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/





2D vs. 3D

2D

SVG, Canvas, etc.

3D

WebGL (FF, Chrome, Safari dev builds)

replaces O3D, Canvas 3D

SVG 3D Transforms



CSS 3 Extensions

Bringing the most important parts of SVG to HTML+CSS!

Gradients

Transforms (2D and 3D)

Transitions

Animations

Masks

Blurring the lines

Canvas as a background image

HTML elements inside SVG elements



Toolkits

Low-level (shapes, lines, events, etc.):

DojoX GFX (SVG, VML, Canvas, Silverlight, SVGWeb)

MooTools ART (SVG, VML)

Processing (Canvas)

Raphaël (SVG, VML)

High-level

DojoX Charting, Drawing

MooTools ART Widgets

PlotKit and many other charting projects



Toolkits

Low-level (shapes, lines, events, etc.):

Dojo GFX, MooTools ART, Processing, Raphaël

High-level

DojoX Charting, Drawing

MooTools ART Widgets

PlotKit and many other charting projects



Let's Draw Something


<!DOCTYPE html><html lang="en"><head> <title>Canvas Example</title></head><body>  <canvas id="myCanvas" width="320" height="320">Your browser does not have support for Canvas. </canvas> </body></html>

Canvas Code - Basic Structure


// ... code continued from previous slide ...

// Apply the gradient to the V ctx.fillStyle = grad; ctx.fill();

// Create the blue box ctx.fillStyle = '#0000ae'; ctx.fillRect(8, 68, 103, 16);

// Create the text ctx.font = 'bold 9pt Arial'; ctx.fillStyle = '#ffffff'; ctx.fillText('LONDON AJAX', 16, 80); ctx.strokeStyle = '#ffffff'; ctx.strokeText('LONDON AJAX', 16, 80); </script>

Canvas Example: London Ajax Logo (cont)


<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width= "480" height= "480">

 <defs> </defs> 

</svg>

SVG Code - Basic Structure


I think of “defs” as almost an array of vars, indexed by an ID attribute

http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd

<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg" version="1.1">

 <defs>   <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="0.00000000" y1="0.00000000" x2="0.00000000" y2="420.00000000"> <stop offset="0.00000000" stop-color="rgb(243, 0, 31)" stop-opacity="1"> </stop> <stop offset="1.00000000" stop-color="rgb(164, 0, 22)" stop-opacity="1"> </stop> </linearGradient> </defs> 

SVG Example: London Ajax Logo






http://www.w3.org/2000/svg

http://www.w3.org/2000/svg

<polyline fill="url(#Gradient1)" style="fill:url(#Gradient1);" stroke="rgb(167, 0, 23)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" points="28 420 100 420 240 124 384 420 456 420 276 44 208 44 28 420" stroke-dasharray="none" fill-rule="evenodd" />

 <rect fill="rgb(0, 0, 174)" fill-opacity="1" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="32" y="272" width="412" height="64" fill-rule="evenodd" />

 <text fill="rgb(255, 255, 255)" fill-opacity="1" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="64" y="320" text-anchor="start" text-decoration="none" rotate="0" kerning="auto" text-rendering="optimizeLegibility" font-style="normal" font-variant="normal" font-weight="bold" font-size="36pt" font-family="Arial" fill-rule="evenodd"> LONDON AJAX </text>

</svg>

SVG Example: London Ajax Logo (cont.)


https://user.sitepen.com/~dwalsh/ajax-london.svg


Two Ways to Include SVG

<object>

<iframe>


<script> // Require gfx dojo.require('dojox.gfx'); dojo.require('dojox.gfx.gradient');

// When the resources have loaded.... dojo.ready(function() {

// Grab the DIV that will contain the drawing var refNode = dojo.byId('someNode');

// Create the GFX "surface" var surface = new dojox.gfx.createSurface(refNode,120,120);

GFX Example: London Ajax Logo


// Create an upside-down "V" surface.createPolyline([ { x:7, y:105 }, { x:25, y:105 }, { x:60, y:31 }, { x:96, y:105 }, { x:114, y:105 }, { x:69, y:11 }, { x:52, y:11 }, { x:7, y:105 } ]).setStroke({color:'#a70017'}).setFill({ type:'linear', x1:0, y1:0, x2:0, y2:105, colors: [{ offset:0, color:'#f3001f'},{ offset:1, color:'#a40016'}] });

// Create the blue box surface.createRect({ x:8, y:68, width:103, height:16 }). setFill('#0000ae');

// Create the text surface.createText({ x:16, y:80, text:'LONDON AJAX', align:'start'}). setFont({ family:'Arial', size:'9pt', weight:'bold' }). setFill('#ffffff');

});</script>

GFX Example: London Ajax Logo (cont)



Example

Fun with the London Ajax logo



<!DOCTYPE html><html lang="en"><head> <title>Canvas Example</title></head><body> <canvas id="myCanvas" width="320" height="320"> Your browser does not have support for Canvas. </canvas> <script> var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d'), grad;" " ctx.fillRect(100, 25, 100, 50);

ctx.beginPath();" " // if you forget false in FF ff 3.6 or 4 beta, it won't draw?!? ctx.arc(150, 150, 100, Math.PI * 3/2, Math.PI * 1/2, false); ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.strokeStyle = 'rgba(0, 127, 255, 0.3)'; ctx.stroke(); </script></body></html>

Canvas Compatibility


introduction to canvas and native web vector graphics

Technology