tests/dashed-canvas.html

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