test range selector creation/deletion
[dygraphs.git] / tests / dashed-canvas.html
... / ...
CommitLineData
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
7them:</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">
14ctx = document.getElementById("cnv").getContext("2d");
15ctx2 = document.getElementById("cnv2").getContext("2d");
16
17// Draw a line segment -- should be perfectly normal.
18ctx.lineWidth = 2;
19ctx.save();
20ctx.beginPath();
21ctx.moveTo(80, 50);
22ctx.lineTo(280, 400);
23ctx.moveTo(330, 400);
24ctx.lineTo(580, 200);
25ctx.stroke();
26
27// Draw a dashed line segment.
28ctx.installPattern([10, 10]);
29ctx.strokeStyle = 'red';
30ctx.beginPath();
31ctx.moveTo(100, 50);
32ctx.lineTo(300, 400);
33ctx.lineTo(300, 450);
34ctx.moveTo(350, 450);
35ctx.lineTo(350, 400);
36ctx.lineTo(600, 200);
37ctx.stroke();
38
39// An unrelated canvas should not be aware of the pattern.
40ctx2.beginPath();
41ctx2.moveTo(100, 50);
42ctx2.lineTo(600, 50);
43ctx2.stroke();
44
45ctx.uninstallPattern();
46
47// Now that we've uninstalled the pattern, should be normal again.
48ctx.strokeStyle = 'blue';
49ctx.beginPath();
50ctx.moveTo(120, 50);
51ctx.lineTo(320, 400);
52ctx.moveTo(370, 400);
53ctx.lineTo(620, 200);
54ctx.stroke();
55
56ctx.restore();
57</script>
58</body>
59</html>