quadraticCurveTo.xml | Explore in Territory

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


	<head>
		<title>Context2D.quadraticCurveTo Test Case</title>
		<script>
			var ctx;
			var current_point;
			var current_center;

			function M (x, y) {
				ctx.beginPath();
				ctx.moveTo(x,y);
				current_point = [x,y];
				current_center = [x,y];
			}

			function q (x1, y1, x, y) {
				x1 += current_point[0];
				y1 += current_point[1];
				x += current_point[0];
				y += current_point[1];
				ctx.quadraticCurveTo(x1, y1, x, y);
				current_point = [x,y];
				current_center = [x1,y1];
			}
			
			function t (x, y) {
				var x1 = current_point[0] * 2 - current_center[0];
				var y1 = current_point[1] * 2 - current_center[1];
				x += current_point[0];
				y += current_point[1];
				ctx.quadraticCurveTo(x1, y1, x, y);
				current_point = [x,y];
				current_center = [x1,y1];
			}

			function z () {
				ctx.closePath();
			}

			////////////////////
            
            function runTest() {
			    // setup canvas and context
			    var canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
			    canvas.setAttribute('width', 480);
			    canvas.setAttribute('height', 360);
			    document.documentElement.appendChild(canvas);
			    ctx = canvas.getContext('2d');

			    // draw shapes equivalent to SVG path data "M 240 296 q 25 -100 47 0 t 47 0 t 47 0 t 47 0 t 47 0 z"
			    M(10,60);
			    q(25,-100,47,0);
			    t(47,0);
			    t(47,0);
			    t(47,0);
			    t(47,0);
			    z();

			    // stroke it
			    ctx.stroke();
            }
		</script>
	</head>

	<body onload="runTest()">

		<p>
			This test case should produce a sine-wave stroked with 1px black.   
		</p>

	</body>

</html>
chromium/third_party/blink/web_tests/fast/canvas/quadraticCurveTo.xml
