| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <title>Canvas Incremental Repaint</title> |
| <style type="text/css" media="screen"> |
| canvas { |
| width: 200px; |
| height: 150px; |
| border: 20px solid black; |
| } |
| </style> |
| <script type="text/javascript" charset="utf-8"> |
| |
| if (window.testRunner) { |
| testRunner.dumpAsText(true); |
| testRunner.waitUntilDone(); |
| } |
| |
| var appleImage; |
| function runRepaintTest() |
| { |
| if (window.testRunner) { |
| document.body.offsetTop; |
| testRunner.displayAndTrackRepaints(); |
| repaintTest(); |
| testRunner.notifyDone(); |
| } else { |
| setTimeout(repaintTest, 0); |
| } |
| } |
| |
| function initializeCanvas() |
| { |
| var canvas = document.getElementById('canvas1'); |
| canvas.width = 170; // deliberately different from element size, for scaling |
| canvas.height = 125; |
| |
| // prep for clearRect test |
| canvas = document.getElementById('canvas2'); |
| var ctx = canvas.getContext('2d'); |
| ctx.fillStyle = '#888888'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| } |
| |
| function repaintTest() |
| { |
| var canvas = document.getElementById('canvas1'); |
| var ctx = canvas.getContext('2d'); |
| |
| // Test with default CTM |
| ctx.fillStyle = 'black'; |
| ctx.strokeStyle = 'green'; |
| ctx.lineWidth = 12; |
| |
| ctx.save(); |
| ctx.scale(1.5, 0.8); |
| ctx.fillRect(30, 40, 70, 80); |
| ctx.strokeRect(30, 40, 70, 80); |
| ctx.restore(); |
| |
| // Test clearRect |
| canvas = document.getElementById('canvas2'); |
| ctx = canvas.getContext('2d'); |
| // clearRect is affected by the transform, and does shadows |
| ctx.shadowOffsetX = 20; |
| ctx.shadowOffsetY = 20; |
| ctx.shadowBlur = 40; |
| ctx.shadowColor = '#0000AA'; |
| ctx.translate(50, 10); |
| ctx.clearRect(10, 10, 80, 80); |
| |
| // Test with stroke |
| canvas = document.getElementById('canvas3'); |
| ctx = canvas.getContext('2d'); |
| |
| ctx.beginPath(); |
| ctx.moveTo(100, 20); |
| ctx.bezierCurveTo(150, 20, 150, 120, 100, 120); |
| ctx.bezierCurveTo(50, 120, 50, 20, 100, 20); |
| ctx.closePath(); |
| ctx.lineWidth = 20; |
| ctx.strokeStyle = 'black'; |
| ctx.stroke(); |
| |
| // Test with thick stroke and transform, and shadow |
| canvas = document.getElementById('canvas4'); |
| ctx = canvas.getContext('2d'); |
| ctx.shadowOffsetX = 20; |
| ctx.shadowOffsetY = 20; |
| ctx.shadowBlur = 40; |
| ctx.shadowColor = 'blue' |
| ctx.lineWidth = 50; |
| ctx.rotate(Math.PI / 5); |
| ctx.scale(1.2, 1.2); |
| ctx.strokeRect(100, 0, 1, 1); |
| |
| // Mitre test |
| canvas = document.getElementById('canvas5'); |
| ctx = canvas.getContext('2d'); |
| ctx.moveTo(15, 40); |
| ctx.lineTo(190, 60); |
| ctx.lineTo(15, 80); |
| |
| ctx.lineWidth = 20; |
| ctx.strokeStyle = '#222222'; |
| ctx.stroke(); |
| |
| // Text test |
| canvas = document.getElementById('canvas6'); |
| ctx = canvas.getContext('2d'); |
| ctx.font = "80px 'Times New Roman'"; |
| ctx.lineWidth = 40; |
| ctx.scale(1, 0.9); |
| ctx.strokeStyle = 'black'; |
| ctx.strokeText("WebKit", 20, 100); |
| ctx.fillStyle = 'green'; |
| ctx.fillText("WebKit", 20, 100); |
| |
| // drawImage test |
| canvas = document.getElementById('canvas7'); |
| ctx = canvas.getContext('2d'); |
| ctx.shadowOffsetX = 20; |
| ctx.shadowOffsetY = 20; |
| ctx.shadowBlur = 40; |
| ctx.shadowColor = 'blue'; |
| ctx.translate(60, 0); |
| ctx.drawImage(appleImage, 10, 10, 100, 100); |
| |
| // clip test |
| canvas = document.getElementById('canvas8'); |
| ctx = canvas.getContext('2d'); |
| ctx.shadowOffsetX = 20; |
| ctx.shadowOffsetY = 20; |
| ctx.shadowBlur = 40; |
| ctx.shadowColor = 'blue'; |
| |
| ctx.beginPath(); |
| ctx.rect(50, 30, 80, 80); |
| ctx.closePath(); |
| ctx.clip(); |
| |
| ctx.translate(40, 0); |
| ctx.drawImage(appleImage, 10, 10, 100, 100); |
| |
| // ImageData test |
| canvas = document.getElementById('canvas9'); |
| ctx = canvas.getContext('2d'); |
| ctx.drawImage(appleImage, 10, 10, 100, 100); |
| |
| var imageData = ctx.getImageData(15, 15, 90, 90); |
| |
| // putImageData ignores shadow, transform and clip, but set the to test |
| ctx.shadowOffsetX = 20; |
| ctx.shadowOffsetY = 20; |
| ctx.shadowBlur = 40; |
| ctx.translate(160, 50); |
| ctx.beginPath(); |
| ctx.rect(50, 30, 80, 80); |
| ctx.closePath(); |
| ctx.clip(); |
| |
| ctx.putImageData(imageData, 150, 20); |
| } |
| |
| function pageLoaded() |
| { |
| initializeCanvas(); |
| |
| appleImage = new Image(); |
| appleImage.onload = function() { |
| runRepaintTest(); |
| } |
| appleImage.src = "resources/apple.gif"; |
| } |
| </script> |
| </head> |
| <body onload="pageLoaded()"> |
| |
| <canvas id="canvas1"></canvas> |
| <canvas id="canvas2"></canvas> |
| <canvas id="canvas3"></canvas><br> |
| <canvas id="canvas4"></canvas> |
| <canvas id="canvas5"></canvas> |
| <canvas id="canvas6"></canvas><br> |
| <canvas id="canvas7"></canvas> |
| <canvas id="canvas8"></canvas> |
| <canvas id="canvas9"></canvas> |
| |
| </body> |
| </html> |
