tests/dashed-canvas.html

   1 <html>
   2 <head>
   3   <script src="../src/polyfills/dashed-canvas.js"></script>
   4 </head>
   5 <body>
   6 <p>You should see solid black and blue lines with a dashed red line in between
   7 them:</p>
   8 <canvas id=cnv width=640 height=480></canvas>
   9
  10 <p>You should see a solid black line:</p>
  11 <canvas id=cnv2 width=640 height=100></canvas>
  12
  13 <script type="text/javascript">
  14 ctx = document.getElementById("cnv").getContext("2d");
  15 ctx2 = document.getElementById("cnv2").getContext("2d");
  16
  17 // Draw a line segment -- should be perfectly normal.
  18 ctx.lineWidth = 2;
  19 ctx.save();
  20 ctx.beginPath();
  21 ctx.moveTo(80, 50);
  22 ctx.lineTo(280, 400);
  23 ctx.moveTo(330, 400);
  24 ctx.lineTo(580, 200);
  25 ctx.stroke();
  26
  27 // Draw a dashed line segment.
  28 // ctx.installPattern([10, 10]);
  29 ctx.setLineDash([10, 10]);
  30 ctx.strokeStyle = 'red';
  31 ctx.beginPath();
  32 ctx.moveTo(100, 50);
  33 ctx.lineTo(300, 400);
  34 ctx.lineTo(300, 450);
  35 ctx.moveTo(350, 450);
  36 ctx.lineTo(350, 400);
  37 ctx.lineTo(600, 200);
  38 ctx.stroke();
  39
  40 // An unrelated canvas should not be aware of the pattern.
  41 ctx2.beginPath();
  42 ctx2.moveTo(100, 50);
  43 ctx2.lineTo(600, 50);
  44 ctx2.stroke();
  45
  46 // ctx.uninstallPattern();
  47 ctx.setLineDash([]);
  48
  49 // Now that we've uninstalled the pattern, should be normal again.
  50 ctx.strokeStyle = 'blue';
  51 ctx.beginPath();
  52 ctx.moveTo(120, 50);
  53 ctx.lineTo(320, 400);
  54 ctx.moveTo(370, 400);
  55 ctx.lineTo(620, 200);
  56 ctx.stroke();
  57
  58 ctx.restore();
  59 </script>
  60 </body>
  61 </html>