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

<html>
<head>
  <script src="../src/polyfills/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.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 DV	1	<html>
fb63bf1b DV	2	<head>
e8c70e4e	3	<script src="../src/polyfills/dashed-canvas.js"></script>
fb63bf1b DV	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.
e8c70e4e DV	28	// ctx.installPattern([10, 10]);
e8c70e4e DV	29	ctx.setLineDash([10, 10]);
fb63bf1b DV	30	ctx.strokeStyle = 'red';
	31	ctx.beginPath();
	32	ctx.moveTo(100, 50);
	33	ctx.lineTo(300, 400);
	34	ctx.lineTo(300, 450);
	35	ctx.moveTo(350, 450);
	36	ctx.lineTo(350, 400);
	37	ctx.lineTo(600, 200);
	38	ctx.stroke();
	39
	40	// An unrelated canvas should not be aware of the pattern.
	41	ctx2.beginPath();
	42	ctx2.moveTo(100, 50);
	43	ctx2.lineTo(600, 50);
	44	ctx2.stroke();
	45
e8c70e4e DV	46	// ctx.uninstallPattern();
e8c70e4e DV	47	ctx.setLineDash([]);
fb63bf1b DV	48
	49	// Now that we've uninstalled the pattern, should be normal again.
	50	ctx.strokeStyle = 'blue';
	51	ctx.beginPath();
	52	ctx.moveTo(120, 50);
	53	ctx.lineTo(320, 400);
	54	ctx.moveTo(370, 400);
	55	ctx.lineTo(620, 200);
	56	ctx.stroke();
	57
	58	ctx.restore();
	59	</script>
	60	</body>
	61	</html>