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
|
<!doctype html>
<meta charset=utf-8>
<title>Load a 100x100 image to a SVG image and draw it to a 100x100 canvas.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/html/canvas/resources/canvas-tests.js"></script>
<div id="log"></div>
<canvas id="dest" height="100" width="100"></canvas>
<script>
async_test(t => {
var sourceImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
sourceImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '/html/canvas/resources/2x2.png');
sourceImg.width = 100;
sourceImg.height = 100;
window.onload = t.step_func_done(() => {
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = "#FF0000";
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
destCtx.imageSmoothingEnabled = false;
// 2 arguments, the dest origin is 0,0
// The source canvas will copied to the 0,0 position of the destination canvas
destCtx.drawImage(sourceImg, 0, 0);
_assertPixel(destCanvas, 0, 0, 253, 140, 245, 255);
_assertPixel(destCanvas, 0, 99, 253, 140, 245, 255);
_assertPixel(destCanvas, 99, 0, 253, 140, 245, 255);
_assertPixel(destCanvas, 99, 99, 253, 140, 245, 255);
});
});
</script>
|
