192 lines
5.1 KiB
HTML
192 lines
5.1 KiB
HTML
<!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>
|