tests/dashed-canvas.html

   1 <html>
   2 <head>
   3   <script src="../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.strokeStyle = 'red';
  30 ctx.beginPath();
  31 ctx.moveTo(100, 50);
  32 ctx.lineTo(300, 400);
  33 ctx.lineTo(300, 450);
  34 ctx.moveTo(350, 450);
  35 ctx.lineTo(350, 400);
  36 ctx.lineTo(600, 200);
  37 ctx.stroke();
  38
  39 // An unrelated canvas should not be aware of the pattern.
  40 ctx2.beginPath();
  41 ctx2.moveTo(100, 50);
  42 ctx2.lineTo(600, 50);
  43 ctx2.stroke();
  44
  45 ctx.uninstallPattern();
  46
  47 // Now that we've uninstalled the pattern, should be normal again.
  48 ctx.strokeStyle = 'blue';
  49 ctx.beginPath();
  50 ctx.moveTo(120, 50);
  51 ctx.lineTo(320, 400);
  52 ctx.moveTo(370, 400);
  53 ctx.lineTo(620, 200);
  54 ctx.stroke();
  55
  56 ctx.restore();
  57 </script>
  58 </body>
  59 </html>