SVG and Canvas

Examples taken from

• Canvas Tutorial [1], Mozilla Developer Center.
• Canvas [2] from Apple Developer Connection.
• SVG Presentation [3]. W3C.
• W3C standard [4].
• SVG Tutorial [5]

• Introduced by Apple for the Mac OS X Dashboard.
• Then implemented in Safari, Firefox.
• IE can run canvas if its first translated to VML using ExplorerCanvas [6].

• The canvas element works like a div.
• Has width and height attributes.
• Use the JavaScrit getContext to get the context on which to draw.

<div>
<script type="text/javascript">
  function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  }
  }
</script>
<canvas style="border: 1px solid black" 
         id="tutorial" width="150" height="150"></canvas>
</div>

• (0,0) is at the top left.

function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

draw() [7]

function drawpath(){
  var canvas = document.getElementById('tutorial2');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(75,50);
      ctx.lineTo(100,75);
      ctx.lineTo(100,25);
      ctx.fill();
  }
}

drawpath() [8]

function drawface(){
  var canvas = document.getElementById('tutorial3');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
      ctx.moveTo(110,75);
      ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
      ctx.moveTo(65,65);
      ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
      ctx.moveTo(95,65);
      ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
      ctx.stroke();
  }
}

drawface() [9]

function drawcallout(){
  var canvas = document.getElementById('tutorial4');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

      // Quadratric curves example
      ctx.beginPath();
      ctx.moveTo(75,25);
      ctx.quadraticCurveTo(25,25,25,62.5);
      ctx.quadraticCurveTo(25,100,50,100);
      ctx.quadraticCurveTo(50,120,30,125);
      ctx.quadraticCurveTo(60,120,65,100);
      ctx.quadraticCurveTo(125,100,125,62.5);
      ctx.quadraticCurveTo(125,25,75,25);
      ctx.stroke();
  }
}

drawcallout() [10]

function drawheart(){
  var canvas = document.getElementById('tutorial5');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

      // Bezier curves example
      ctx.beginPath();
      ctx.moveTo(75,40);
      ctx.bezierCurveTo(75,37,70,25,50,25);
      ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
      ctx.bezierCurveTo(20,80,40,102,75,120);
      ctx.bezierCurveTo(110,102,130,80,130,62.5);
      ctx.bezierCurveTo(130,62.5,130,25,100,25);
      ctx.bezierCurveTo(85,25,75,37,75,40);
      ctx.fill();
  }
}

drawheart() [11]

1. Create a new Image or use one from document.images.
2. Use drawImage to draw it on the canvas.

• The only way to get text on your canvas (well, you could lineTo, a lot)

function drawchart() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.src = 'backdrop.png';
    img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.beginPath();
        ctx.moveTo(30,96);
        ctx.lineTo(70,66);
        ctx.lineTo(103,76);
        ctx.lineTo(170,15);
        ctx.stroke();
    }
}

drawchart() [12]

• Scale with drawImage(image, xpos, ypos, width, height)
• Slice with drawImage(image, sourcex, sourcey, sourcewidth, sourceheight, destx, desty, destwidth, destheight).

• Various ways to set a color:

// these all set the fillStyle to 'orange'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

• Use with fillStyle or strokeStyle

function drawcolors() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (i=0;i<6;i++){
    for (j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + 
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}
      

drawcolors() [13]

function drawtransparency() {
  var ctx = document.getElementById('canvas2').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,0,75,75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75,0,75,75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0,75,75,75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75,75,150,150);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (i=0;i<7;i++){
      ctx.beginPath();
      ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
      ctx.fill();
  }
}

drawtransparency() [14]

function drawlineargradient() {
  var ctx = document.getElementById('canvas3').getContext('2d');

  // Create gradients
  var lingrad = ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(0.5, '#26C000');
  lingrad.addColorStop(1, '#fff');

  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

  // assign gradients to fill and stroke styles
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;
  
  // draw shapes
  ctx.fillRect(10,10,130,130);
  ctx.strokeRect(50,50,50,50);

}

drawlineargradient() [15]

• createRadialGradient works similarly.

• lineWidth is the width used.
• lineCap is either "butt", "round", or "square".

function drawlines() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineCap = ['butt','round','square'];

  // Draw guides
  ctx.strokeStyle = '#09f';
  ctx.beginPath();
  ctx.moveTo(10,10);
  ctx.lineTo(140,10);
  ctx.moveTo(10,140);
  ctx.lineTo(140,140);
  ctx.stroke();

  // Draw lines
  ctx.strokeStyle = 'black';
  for (i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25+i*50,10);
    ctx.lineTo(25+i*50,140);
    ctx.stroke();
  }
}

drawlines() [16]

function drawlinejoin() {
  var ctx = document.getElementById('canvas2').getContext('2d');
  var lineJoin = ['round','bevel','miter'];
  ctx.lineWidth = 10;
  for (i=0;i<lineJoin.length;i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(-5,5+i*40);
    ctx.lineTo(35,45+i*40);
    ctx.lineTo(75,5+i*40);
    ctx.lineTo(115,45+i*40);
    ctx.lineTo(155,5+i*40);
    ctx.stroke();
  }
}

drawlinejoin() [17]

• save() and restore() push the current state (styles) of the canvas into a stack.

var ctx = document.getElementById('canvas').getContext('2d');

ctx.fillRect(0,0,150,150);   //  draw a rectangle with default settings
ctx.save();                  //  Save the default state

ctx.fillStyle = '#09F'       // Make changes to the settings
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings

ctx.save();                  // Save the current state
ctx.fillStyle = '#FFF'       // Make changes to the settings
ctx.globalAlpha = 0.5;    
ctx.fillRect(30,30,90,90);   // Draw a rectangle with new settings

ctx.restore() [18]
ctx.fillRect(45,45,60,60); [19] - is not alpha blended.
ctx.restore() [20]
ctx.fillRect(60,60,30,30); [21] - fillstyle is now black

• Move origin with translate(x,y). Make sure you save before.

function drawtranslate() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillRect(0,0,300,300);
      for (var i=0;i<3;i++) {
        for (var j=0;j<3;j++) {
            ctx.save();
            ctx.strokeStyle = "#9CFF00";
            ctx.translate(50+j*100,50+i*100);
            drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
            ctx.restore();
        }
      }
}
function drawSpirograph(ctx,R,r,O){
    var x1 = R-O;
    var y1 = 0;
    var i  = 1;
    ctx.beginPath();
    ctx.moveTo(x1,y1);
      do {
        if (i>20000) break;
          var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
          var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
          ctx.lineTo(x2,y2);
          x1 = x2;
          y1 = y2;
          i++;
      } while (x2 != R-O && y2 != 0 );
    ctx.stroke();
}

drawtranslate() [22]

• rotate(angle)
• scale(x,y)

drawcompositing() [23]

var compositeTypes = [
  'source-over','source-in','source-out','source-atop',
  'destination-over','destination-in','destination-out','destination-atop',
  'lighter','darker','copy','xor'
];
function drawcompositing(){
  for (i=0;i<compositeTypes.length;i++){
    var label = document.createTextNode(compositeTypes[i]);
    document.getElementById('lab'+i).appendChild(label);
    var ctx = document.getElementById('tut'+i).getContext('2d');

    // draw rectangle
    ctx.fillStyle = "#09f";
    ctx.fillRect(15,15,70,70);

    // set composite property
    ctx.globalCompositeOperation = compositeTypes[i];
    
    // draw circle
    ctx.fillStyle = "#f30";
    ctx.beginPath();
    ctx.arc(75,75,35,0,Math.PI*2,true);
    ctx.fill();
  }
}

function drawclip() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.fillRect(0,0,150,150);
  ctx.translate(75,75);

  // Create a circular clipping path        
  ctx.beginPath();
  ctx.arc(0,0,60,0,Math.PI*2,true);
  ctx.clip();

  // draw background
  var lingrad = ctx.createLinearGradient(0,-75,0,75);
  lingrad.addColorStop(0, '#232256');
  lingrad.addColorStop(1, '#143778');
  
  ctx.fillStyle = lingrad;
  ctx.fillRect(-75,-75,150,150);

  // draw stars
  for (j=1;j<50;j++){
    ctx.save();
    ctx.fillStyle = '#fff';
    ctx.translate(75-Math.floor(Math.random()*150),
                  75-Math.floor(Math.random()*150));
    drawStar(ctx,Math.floor(Math.random()*4)+2);
    ctx.restore();
  }
  
}
function drawStar(ctx,r){
  ctx.save();
  ctx.beginPath()
  ctx.moveTo(r,0);
  for (i=0;i<9;i++){
    ctx.rotate(Math.PI/5);
    if(i%2 == 0) {
      ctx.lineTo((r/0.525731)*0.200811,0);
    } else {
      ctx.lineTo(r,0);
    }
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

drawclip() [24]

• Use the setInterval(function, delay) and setTimeout(function, delay).

var sun = new Image();
var moon = new Image();
var earth = new Image();
function init(){
  sun.src = 'sun.png';
  moon.src = 'moon.png';
  earth.src = 'earth.png';
  setInterval('draw()',100);
}

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0,0,300,300); // clear canvas

  ctx.save();
  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.translate(150,150);

  // Earth
  var time = new Date();
  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
  ctx.translate(105,0);
  ctx.fillRect(0,-12,50,24); // Shadow
  ctx.drawImage(earth,-12,-12);

  // Moon
  ctx.save();
  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
  ctx.translate(0,28.5);
  ctx.drawImage(moon,-3.5,-3.5);
  ctx.restore();

  ctx.restore();
  
  ctx.beginPath();
  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
  ctx.stroke();
 
  ctx.drawImage(sun,0,0);
}

init();draw(); [25]

• Scalable Vector Graphics: W3C standard [26].
• Parts of SVG 1.1 [27] supported in Firefox 2.0 [28] and Opera.
• Many drawing programs output svg: inkscape [29].
• An XML language for describing vector graphics.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="9cm"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
    <circle cx="6cm" cy="2cm" r="100" fill="red"
                    transform="translate(0,50)" />
    <circle cx="6cm" cy="2cm" r="100" fill="blue"
                    transform="translate(70,150)" />
    <circle cx="6cm" cy="2cm" r="100" fill="green"
                    transform="translate(-70,150)" />
  </g>
</svg>

<ul xmlns:svg="http://www.w3.org/2000/svg">
<li>You can also inline a blue square
<svg:svg width="10" height="10"> 
<svg:rect x="0" y="0" width="10" height="10" fill="blue"/>
</svg:svg>, like this.</li>
</ul>

• You can also inline a blue square , like this.

• Everything within an svg element.
• It sets up the coordinate system with the width and height attributes. Top right is (0,0).
• The viewBox attribute tells user agent to map full image onto view canvas. preserveAspectRatio controls the mapping.
• The g element is used for grouping

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
    <rect x="20" y="20" rx="0" ry="0" fill="red" width="20%" height="20%"/>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
     <circle cx="100" cy="100" r="90px" fill="blue" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<line x1="10" y1="10" x2="190" y2="190" stroke="blue" stroke-width="4" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<polyline points="10,190 20,190 20,150 50,150 50,190 80,190 
  80,110 110,110 110,190 140,190 140,70 
  170,70 170,190 190,190" stroke="blue" fill="darkblue" stroke-width="4" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<polygon points="100,10 40,180 190,60 10,60 160,180 100,10" stroke="blue" fill="darkblue" stroke-width="4" fill-rule="nonzero" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g stroke="black" stroke-width="0.1cm">
    <image x="0" y="20" width="200" height="180" xlink:href="backdrop.png" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g stroke="black" stroke-width="1px">
<text  x="50%" y="50%," dx="0,0,0,0,20" dy="0,0,0,0,8"
                        rotate="20,30,40,50,0,0,-10" 
                        textLength="..." 
                        lengthAdjust="..." 
         font-size="30" text-anchor="middle" >Hello World</text>
  </g>
</svg>

• All SVG elements have stroke and fill attributes.
• There are different types of color values:

Class	Explanation	Example
Keyword	SVG defines everything from 'aliceblue' to 'yellowgreen' on its type page [30].	Aliceblue
Functional	A functional way to define the color. Either values in the range from 0 to 255 or percentages can be used. Mixing percents and values is illegal.	rgb(255,255,255) rgb(100%,100%,100%)
Hexadecimal	This is the same way colors are defined in HTML.	#FFFFFF
URI	A reference to a color gradient or pattern. Described later...	url(#MyGradient)

• You can also use opacity, fill-opacity, stroke-opacity, and stop-opacity (for gradients). There are percentages.

• You can group something in a g within a defs and then re-use it with a use.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="250px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<defs>
<g id="group1" fill="green" opacity="0.9" >
<rect x="20" y="20" width="100" height="100" opacity="0.5" />
<rect x="80" y="80" width="100" height="100" fill="gray" />
</g>
</defs>
<use x="0" y="0" width="200" height="200" xlink:href="#group1" />
<use x="0" y="0" width="200" height="200" xlink:href="#group1" transform="rotate(70, 100, 100)" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         width="100%" height="200" viewBox="0 0 1200 200" >
        <defs>
        <linearGradient id="myFillGrad" >
            <stop offset="5%" stop-color="red" />
            <stop offset="95%" stop-color="blue" stop-opacity="0.5" />
        </linearGradient>
        </defs>

        <!-- Gradient Example -->
    <rect x="20" y="20" width="1160" height="160" fill="url(#myFillGrad)" stroke="black" 
        stroke-width="2" />
</svg>

• The transform attribute can be set to
  • translate(x,y)
  • scale(sx,sy)
  • rotate(angle,cx,cy)
  • skewX(angle)
  • skewY(angle)
  • matrix(a,b,c,d,e,f)

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
         width="200" height="100"
         viewBox="-10 -5 110 55"  >
        
        <defs>
        <g id="example">
            <rect  width="20" height="20" opacity="0.8" stroke="black" />
        </g>
        </defs>

        <!-- Translate then rotate -->
    
    <use xlink:href="#example" fill="red" />
    <g transform="translate(15, 15)" fill="yellow">
        <use xlink:href="#example" />
        <g transform="rotate(30)" fill="green">
            <use xlink:href="#example" />
        </g>
    </g>
    
        <!-- Rotate then translate -->

    <g transform="translate(70)">
    <use xlink:href="#example" fill="red" />
    <g transform="rotate(30)" fill="yellow">
        <use xlink:href="#example" />
        <g transform="translate(15, 15)" fill="green">
            <use xlink:href="#example" />
        </g>
    </g>
    </g>
</svg>

• Use the path to specify a path.
• Shorthand one-letter commands let you specify things such as:
  • M: moveto
  • L: line to
  • C: curve to
  • Q: quadratic Bezier curve to
  • A: elliptical arc
  • z: close path.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
    <path d="M100,10 L100,10 40,180 190,60 10,60 160,180 z" 
       stroke="blue" fill="darkblue" stroke-width="4" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <defs>
    <linearGradient id="hill" x1="100%" y1="100%" x2="100%" y2="0%">
      <stop offset="5%" stop-color="green" />
        <stop offset="95%" stop-color="lightgreen" stop-opacity="0.8" />        
    </linearGradient>
  </defs>

  <path d="M40,140 L40,100 10,100 C10,10 90,10 90,100 L60,100 60,140 
    M140,50 C70,180 195,180 190,100 " stroke="darkgreen" stroke-width="4" 
    fill="url(#hill)" />
    
  <circle cx="10" cy="10" r="4" fill="none" stroke="red" />
  <circle cx="90" cy="10" r="4" fill="none" stroke="red" />
        
  <line x1="10" y1="10" x2="10" y2="100" stroke="black" stroke-width="2" opacity="0.5" />
  <line x1="90" y1="10" x2="90" y2="100" stroke="black" stroke-width="2" opacity="0.5" />
   
  <circle cx="70" cy="180" r="4" fill="none" stroke="red" />
  <circle cx="195" cy="180" r="4" fill="none" stroke="red" />
                
  <line x1="70" y1="180" x2="140" y2="50" stroke="black" stroke-width="2" opacity="0.5" />
  <line x1="195" y1="180" x2="190" y2="100" stroke="black" stroke-width="2" opacity="0.5" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="200px"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">
  <defs>
    <path id="path1" d="M25, 100 C10,10 175,10 175,100" />
  </defs>

  <use xlink:href="#path1" fill="none" stroke="red"  />
  <text font-size="19.5" fill="blue">
    <textPath xlink:href="#path1">Hello text-on-a-path world!</textPath>
  </text>
</svg>

• Create XML elments using createElementNS and appendChild

// Create a namespace for our SVG-related utilities
var SVG = {};

// These are SVG-related namespace URLs
SVG.ns = "http://www.w3.org/2000/svg";
SVG.xlinkns = "http://www.w3.org/1999/xlink";

// Create and return an empty <svg> element.
// Note that the element is not added to the document
// Note that we can specify the pixel size of the image as well as
// its internal coordinate system.
SVG.makeCanvas = function(id, pixelWidth, pixelHeight, userWidth, userHeight) {
    var svg = document.createElementNS(SVG.ns, "svg:svg");
    svg.setAttribute("id", id);
    // How big is the canvas in pixels
    svg.setAttribute("width", pixelWidth);
    svg.setAttribute("height", pixelHeight);
    // Set the coordinates used by drawings in the canvas
    svg.setAttribute("viewBox", "0 0 " + userWidth + " " + userHeight);
    // Define the XLink namespace that SVG uses
    svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink",
                       SVG.xlinkns);
    return svg;
};

// Serialize the canvas element to a string and use this string
// in a data: URL for display in an <object> tag. This allows SVG
// to work in browsers that support the data: URL scheme and have an SVG 
// plugin installed.
SVG.makeDataURL = function(canvas) {
    // We don't bother with the IE serialization technique since it
    // doesn't support data: URLs
    var text = (new XMLSerializer()).serializeToString(canvas);
    var encodedText = encodeURIComponent(text);
    return "data:image/svg+xml," + encodedText;
};

// Create an <object> to display an SVG drawing using a data: URL
SVG.makeObjectTag = function(canvas, width, height) {
    var object = document.createElement("object"); // Create HTML <object> tag
    object.width = width;                          // Set size of object
    object.height = height;
    object.data = SVG.makeDataURL(canvas);         // SVG image as data: URL
    object.type = "image/svg+xml"                  // SVG MIME type
    return object;
}

/**
 * Draw a pie chart into an <svg> element.
 * Arguments:
 *   canvas: the SVG element (or the id of that element) to draw into.
 *   data: an array of numbers to chart, one for each wedge of the pie.
 *   cx, cy, r: the center and radius of the pie
 *   colors: an array of HTML color strings, one for each wedge
 *   labels: an array of labels to appear in the legend, one for each wedge
 *   lx, ly: the upper-left corner of the chart legend
 */
function pieChart(canvas, data, cx, cy, r, colors, labels, lx, ly) {
    // Locate canvas if specified by id instead of element
    if (typeof canvas == "string") canvas = document.getElementById(canvas);
    
    // Add up the data values so we know how big the pie is
    var total = 0;
    for(var i = 0; i < data.length; i++) total += data[i];
    
    // Now figure out how big each slice of pie is.  Angles in radians.
    var angles = []
    for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*Math.PI*2;

    // Loop through each slice of pie.
    startangle = 0;
    for(var i = 0; i < data.length; i++) {
        // This is where the wedge ends
        var endangle = startangle + angles[i];

        // Compute the two points where our wedge intersects the circle
        // These formulas are chosen so that an angle of 0 is at 12 o'clock
        // and positive angles increase clockwise.
        var x1 = cx + r * Math.sin(startangle);
        var y1 = cy - r * Math.cos(startangle);
        var x2 = cx + r * Math.sin(endangle);
        var y2 = cy - r * Math.cos(endangle);
        
        // This is a flag for angles larger than than a half circle
        var big = 0;
        if (endangle - startangle > Math.PI) big = 1;
        
        // We describe a wedge with an <svg:path> element
        // Notice that we create this with createElementNS()
        var path = document.createElementNS(SVG.ns, "path");
        
        // This string holds the path details
        var d = "M " + cx + "," + cy +  // Start at circle center
            " L " + x1 + "," + y1 +     // Draw line to (x1,y1)
            " A " + r + "," + r +       // Draw an arc of radius r
            " 0 " + big + " 1 " +       // Arc details...
            x2 + "," + y2 +             // Arc goes to to (x2,y2)
            " Z";                       // Close path back to (cx,cy)
        // This is an XML element, so all attributes must be set
        // with setAttribute().  We can't just use JavaScript properties
        path.setAttribute("d", d);              // Set this path 
        path.setAttribute("fill", colors[i]);   // Set wedge color
        path.setAttribute("stroke", "black");   // Outline wedge in black
        path.setAttribute("stroke-width", "2"); // 2 units thick
        canvas.appendChild(path);               // Add wedge to canvas

        // The next wedge begins where this one ends
        startangle = endangle;

        // Now draw a little matching square for the key
        var icon = document.createElementNS(SVG.ns, "rect");
        icon.setAttribute("x", lx);             // Position the square
        icon.setAttribute("y", ly + 30*i);
        icon.setAttribute("width", 20);         // Size the square
        icon.setAttribute("height", 20);
        icon.setAttribute("fill", colors[i]);   // Same fill color as wedge
        icon.setAttribute("stroke", "black");   // Same outline, too.
        icon.setAttribute("stroke-width", "2");
        canvas.appendChild(icon);               // Add to the canvas

        // And add a label to the right of the rectangle
        var label = document.createElementNS(SVG.ns, "text");
        label.setAttribute("x", lx + 30);       // Position the text
        label.setAttribute("y", ly + 30*i + 18);
        // Text style attributes could also be set via CSS
        label.setAttribute("font-family", "sans-serif");
        label.setAttribute("font-size", "16");
        // Add a DOM text node to the <svg:text> element
        label.appendChild(document.createTextNode(labels[i]));
        canvas.appendChild(label);              // Add text to the canvas
    }
}

pieChart('canvas', [1,2,3,4],
  50, 50, 40, ['#F00', '#0F0', '#00F', '#AAA'],
  ['a','b','c','d'], 100, 20) [31]