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

Recommandé

Recommandé

Contenu connexe

Similaire à Introduction to Canvas and Native Web Vector Graphics

Similaire à Introduction to Canvas and Native Web Vector Graphics (20)

Dernier

Dernier (20)

Introduction to Canvas and Native Web Vector Graphics