dcos-dygraphs
Version:
dygraphs is a fast, flexible open source JavaScript charting library.
59 lines (50 loc) • 1.31 kB
HTML
<html>
<body>
<p>You should see solid black and blue lines with a dashed red line in between
them:</p>
<canvas id=cnv width=640 height=480></canvas>
<p>You should see a solid black line:</p>
<canvas id=cnv2 width=640 height=100></canvas>
<script type="text/javascript">
ctx = document.getElementById("cnv").getContext("2d");
ctx2 = document.getElementById("cnv2").getContext("2d");
// Draw a line segment -- should be perfectly normal.
ctx.lineWidth = 2;
ctx.save();
ctx.beginPath();
ctx.moveTo(80, 50);
ctx.lineTo(280, 400);
ctx.moveTo(330, 400);
ctx.lineTo(580, 200);
ctx.stroke();
// Draw a dashed line segment.
// ctx.installPattern([10, 10]);
ctx.setLineDash([10, 10]);
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(300, 400);
ctx.lineTo(300, 450);
ctx.moveTo(350, 450);
ctx.lineTo(350, 400);
ctx.lineTo(600, 200);
ctx.stroke();
// An unrelated canvas should not be aware of the pattern.
ctx2.beginPath();
ctx2.moveTo(100, 50);
ctx2.lineTo(600, 50);
ctx2.stroke();
// ctx.uninstallPattern();
ctx.setLineDash([]);
// Now that we've uninstalled the pattern, should be normal again.
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.moveTo(120, 50);
ctx.lineTo(320, 400);
ctx.moveTo(370, 400);
ctx.lineTo(620, 200);
ctx.stroke();
ctx.restore();
</script>
</body>
</html>