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