[dygraphs.git] / tests / dashed-canvas.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>
Commit	Line	Data
fb63bf1b	1	<html>
fb63bf1b DV	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.
e8c70e4e DV	25	// ctx.installPattern([10, 10]);
e8c70e4e DV	26	ctx.setLineDash([10, 10]);
fb63bf1b DV	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
e8c70e4e DV	43	// ctx.uninstallPattern();
e8c70e4e DV	44	ctx.setLineDash([]);
fb63bf1b DV	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>