summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/canvas/downsample-quality.html
blob: ed2f31d6e66c36874f2b11ef1c24992d738b693b (plain)
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>