Introduction to Canvas and Native Web Vector Graphics

Canvas and Web Vector
Graphics
Dylan Schiemann (@dylans)
SitePen, Inc.
HTML5 Code Camp, October, 2010

© SitePen, Inc. All Rights Reserved

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


1996

Topology and Rheology of Quasi Two-Dimensional Foam
http://arxiv.org/pdf/cond-mat/9904101



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 Canvas
Representation 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


Canvas Code - Basic Structure

<!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 Example: London Ajax Logo

<script>
// Set up a few variables, including our canvas and context
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
grad;

// Build the path for the V
ctx.beginPath();
ctx.moveTo(7, 105);
ctx.lineTo(25, 105);
ctx.lineTo(60, 31);
ctx.lineTo(69, 11);
ctx.lineTo(52, 11);
ctx.closePath();

// Set up the stroke
ctx.strokeStyle = '#a70017';
ctx.stroke();

// Set up the gradient
grad = ctx.createLinearGradient(0, 0, 0, 105);
grad.addColorStop(0, '#f3001f');
grad.addColorStop(1, '#a40016');


Canvas Example: London Ajax Logo (cont)

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


SVG Code - Basic Structure

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


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

SVG Example: London Ajax Logo

<?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 (cont.)



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


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

Two Ways to Include SVG

<object>
<iframe>


GFX Example: London Ajax Logo



<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 (cont)

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


Example

Fun with the London Ajax logo


Canvas Compatibility

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


Introduction to Canvas and Native Web Vector Graphics

More Related Content

Similar to Introduction to Canvas and Native Web Vector Graphics

Recently uploaded

Introduction to Canvas and Native Web Vector Graphics