Content - 6208b8dc05629208ee3d68b233e1b6c107d1d12b - 76b37bd/2dcontext/drawing-images-to-the-canvas/drawimage_svg_image_1.html

visit type:

Tip revision: 7196fc9774577a75f50a49a1107d7d0e80807616 authored by Ian Kilpatrick on 22 December 2018, 23:06:09 UTC
[LayoutNG] Remove NGLayoutResult::PositionedFloats.

Tip revision: 7196fc9

drawimage_svg_image_1.html

<!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="/common/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', '../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>

Browse the archive

https://github.com/web-platform-tests/wpt