canvas-incremental-repaint.html | Explore in Territory

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Canvas Incremental Repaint</title>
  <style type="text/css" media="screen">
    body { overflow: hidden; }
    canvas {
      width: 200px;
      height: 150px;
      border: 20px solid black;
    }
  </style>
  <script src="../../resources/run-after-layout-and-paint.js"></script>
  <script type="text/javascript" charset="utf-8">

    if (window.testRunner)
      testRunner.waitUntilDone();

    var appleImage;

    function initializeCanvas()
    {
      var canvas = document.getElementById('canvas1');
      canvas.width = 170; // deliberately different from element size, for scaling
      canvas.height = 125;

      // prep for clearRect test
      canvas = document.getElementById('canvas2');
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#888888';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    function repaintTest()
    {
      var canvas = document.getElementById('canvas1');
      var ctx = canvas.getContext('2d');

      // Test with default CTM
      ctx.fillStyle = 'black';
      ctx.strokeStyle = 'green';
      ctx.lineWidth = 12;

      ctx.save();
      ctx.scale(1.5, 0.8);
      ctx.fillRect(30, 40, 70, 80);
      ctx.strokeRect(30, 40, 70, 80);
      ctx.restore();

      // Test clearRect
      canvas = document.getElementById('canvas2');
      ctx = canvas.getContext('2d');
      // clearRect is affected by the transform, and does shadows
      ctx.shadowOffsetX = 20;
      ctx.shadowOffsetY = 20;
      ctx.shadowBlur = 40;
      ctx.shadowColor = '#0000AA';
      ctx.translate(50, 10);
      ctx.clearRect(10, 10, 80, 80);

      // Test with stroke
      canvas = document.getElementById('canvas3');
      ctx = canvas.getContext('2d');

      ctx.beginPath();
      ctx.moveTo(100, 20);
      ctx.bezierCurveTo(150, 20, 150, 120, 100, 120);
      ctx.bezierCurveTo(50, 120, 50, 20, 100, 20);
      ctx.closePath();
      ctx.lineWidth = 20;
      ctx.strokeStyle = 'black';
      ctx.stroke();

      // Test with thick stroke and transform, and shadow
      canvas = document.getElementById('canvas4');
      ctx = canvas.getContext('2d');
      ctx.shadowOffsetX = 20;
      ctx.shadowOffsetY = 20;
      ctx.shadowBlur = 40;
      ctx.shadowColor = 'blue'
      ctx.lineWidth = 50;
      ctx.rotate(Math.PI / 5);
      ctx.scale(1.2, 1.2);
      ctx.strokeRect(100, 0, 1, 1);

      // Mitre test
      canvas = document.getElementById('canvas5');
      ctx = canvas.getContext('2d');
      ctx.moveTo(15, 40);
      ctx.lineTo(190, 60);
      ctx.lineTo(15, 80);

      ctx.lineWidth = 20;
      ctx.strokeStyle = '#222222';
      ctx.stroke();

      // Text test
      canvas = document.getElementById('canvas6');
      ctx = canvas.getContext('2d');
      ctx.font = "80px 'Times New Roman'";
      ctx.lineWidth = 40;
      ctx.scale(1, 0.9);
      ctx.strokeStyle = 'black';
      ctx.strokeText("WebKit", 20, 100);
      ctx.fillStyle = 'green';
      ctx.fillText("WebKit", 20, 100);

      // drawImage test
      canvas = document.getElementById('canvas7');
      ctx = canvas.getContext('2d');
      ctx.shadowOffsetX = 20;
      ctx.shadowOffsetY = 20;
      ctx.shadowBlur = 40;
      ctx.shadowColor = 'blue';
      ctx.translate(60, 0);
      ctx.drawImage(appleImage, 10, 10, 100, 100);

      // clip test
      canvas = document.getElementById('canvas8');
      ctx = canvas.getContext('2d');
      ctx.shadowOffsetX = 20;
      ctx.shadowOffsetY = 20;
      ctx.shadowBlur = 40;
      ctx.shadowColor = 'blue';

      ctx.beginPath();
      ctx.rect(50, 30, 80, 80);
      ctx.closePath();
      ctx.clip();

      ctx.translate(40, 0);
      ctx.drawImage(appleImage, 10, 10, 100, 100);

      // ImageData test
      canvas = document.getElementById('canvas9');
      ctx = canvas.getContext('2d');
      ctx.drawImage(appleImage, 10, 10, 100, 100);

      var imageData = ctx.getImageData(15, 15, 90, 90);

      // putImageData ignores shadow, transform and clip, but set the to test
      ctx.shadowOffsetX = 20;
      ctx.shadowOffsetY = 20;
      ctx.shadowBlur = 40;
      ctx.translate(160, 50);
      ctx.beginPath();
      ctx.rect(50, 30, 80, 80);
      ctx.closePath();
      ctx.clip();

      ctx.putImageData(imageData, 150, 20);

      if (window.testRunner)
        testRunner.notifyDone();
    }

    function pageLoaded()
    {
      initializeCanvas();

      appleImage = new Image();
      appleImage.onload = function() {
        runAfterLayoutAndPaint(repaintTest);
      }
      appleImage.src = "resources/apple.gif";
    }
  </script>
</head>
<body onload="pageLoaded()">

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas><br>
<canvas id="canvas4"></canvas>
<canvas id="canvas5"></canvas>
<canvas id="canvas6"></canvas><br>
<canvas id="canvas7"></canvas>
<canvas id="canvas8"></canvas>
<canvas id="canvas9"></canvas>

</body>
</html>
chromium/third_party/blink/web_tests/fast/canvas/canvas-incremental-repaint.html
