| <!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.dumpAsText(true); |
| |
| 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> |
