canvas-large-pattern-expected.html | Explore in Territory

<html>
<p>Disable acceleration by using a large CanvasPattern.</p>
<script>
  var img = document.createElement('img');
  img.src = 'resources/html5.png'
  img.onload = () => {
    var canvas = document.createElement('canvas');
    canvas.width = 400;
    var context = canvas.getContext('2d');
    context.fillStyle = '#0f0';
    context.fillRect(0, 0, 10, 10);

    var dstCanvas = document.createElement('canvas');
    var dstContext = dstCanvas.getContext('2d');
    var pattern = dstContext.createPattern(canvas, 'repeat');

    dstContext.fillStyle = 'red';
    dstContext.save();
    dstContext.fillStyle = 'grey';
    dstContext.fillRect(0, 0, 30, 30);

    dstContext.beginLayer({filter: {name: 'dropShadow', stdDeviation: 0}});
    dstContext.fillStyle = 'blue';
    dstContext.fillRect(40, 0, 30, 30);

    dstContext.drawImage(img, 150, 0);

    dstContext.fillStyle = pattern;
    dstContext.fillRect(0, 0, dstCanvas.width, dstCanvas.height);

    dstContext.endLayer();
    dstContext.restore();
    dstContext.fillRect(80, 0, 30, 30);

    document.body.appendChild(dstCanvas);
  };
</script>
</html>

chromium/third_party/blink/web_tests/fast/canvas/canvas-large-pattern-expected.html