<!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>
if (window.testRunner)
testRunner.dumpAsTextWithPixelResults();
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>