canvas-overflow-hidden-animation.html

<!doctype html>
<html>
  <head>
  <style>
#canvas {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0px;
  top: 0px;
}

#overlay {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}

#follower {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 50px;
  height: 50px;
  background-color: #00FF00;
}
  </style>
  </head>
  <body>
  <canvas id="canvas"></canvas>
  <div id="overlay"><div id="follower"></div></div>
    <script>
if (window.testRunner) {
  testRunner.waitUntilDone();
}

var canvas = document.getElementById("canvas");
canvas.width = 300;
canvas.height = 300;

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";

var follower = document.getElementById("follower");

drawLoop = function() {
  // update the follower
  follower.style.left = "0px";
  follower.style.top  = "0px";
  
  // draw the object
  ctx.clearRect(0, 0, 300, 300);
  ctx.fillRect(0, 0, 50, 50);

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

window.setTimeout(drawLoop, 0);
    </script>
  </body>
</html>

chromium/third_party/blink/web_tests/fast/canvas/canvas-overflow-hidden-animation.html