[dygraphs.git] / tests / dashed-canvas.html

<html>
<head>
  <script src="../dashed-canvas.js"></script>
</head>
<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.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();

// 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
	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>