1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<canvas id="c1" width="100" height="100"></canvas>
<canvas id="c2" width="100" height="100"></canvas>
<script>
// This test should show two side-by-side thin circle outlines
// with good visual quality, i.e. no aliasing from image downsampling.
// Both circles should look identical.
if (window.testRunner) {
testRunner.dumpAsTextWithPixelResults();
testRunner.waitUntilDone();
}
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 500;
offscreenCanvas.height = 500;
var offscreenContext = offscreenCanvas.getContext('2d');
offscreenContext.beginPath()
offscreenContext.arc(250, 250, 200, 0, 2 * Math.PI, false);
offscreenContext.lineWidth = 3;
offscreenContext.stroke();
var dstCtx = document.getElementById('c1').getContext('2d');
dstCtx.drawImage(offscreenCanvas, 0, 0, 500, 500, 0, 0, 100, 100);
var srcImage = new Image();
srcImage.src = offscreenCanvas.toDataURL();
srcImage.onload = function() {
dstCtx = document.getElementById('c2').getContext('2d');
dstCtx.drawImage(srcImage, 0, 0, 500, 500, 0, 0, 100, 100);
testRunner.notifyDone();
}
</script>
|
