Path2D example

by hajime_nagahata

HTML

<html>
 <body onload="draw();">
   <canvas id="canvas" width="130" height="100"></canvas>
 </body>
</html>

JavaScript

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

    var circle = new Path2D("M 6.95 12 h 52.7 M 61.2 0 H 5.4 M 5.4 0 C 4.52 0 3.8 0.72 3.8 1.6 c 0 0.09 0.01 0.19 0.02 0.28 M 3.82 1.88 l 1.55 8.8 M 5.38 10.68 C 5.51 11.44 6.18 12 6.95 12 M 0 6 c 0 0.86 0.69 1.55 1.55 1.55 S 3.1 6.86 3.1 6 S 2.41 4.45 1.55 4.45 S 0 5.14 0 6 L 0 6 Z M 63.5 6 c 0 0.86 0.69 1.55 1.55 1.55 S 66.6 6.86 66.6 6 s -0.69 -1.55 -1.55 -1.55 S 63.5 5.14 63.5 6 L 63.5 6 Z M 62.78 1.88 l -1.55 8.8 M 62.78 1.88 c 0.15 -0.87 -0.43 -1.7 -1.3 -1.85 C 61.39 0.01 61.29 0 61.2 0 M 59.65 12 c 0.78 0 1.44 -0.56 1.58 -1.32");

    ctx.stroke(circle);
  }
}