<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
      .clippingContainer {
        width: 200px;
        height: 200px;
        overflow: hidden;
      }

  </style>

  <script>
    function drawCanvas()
    {
        if (window.testRunner)
          testRunner.dumpAsText(true);
        var canvas = document.getElementById("clippedCanvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "red";
        context.fillRect(0, 0, 400, 400);
        context.fillStyle = "green";
        context.fillRect(0, 0, 200, 200);
    }
  </script>
</head>

<body onload="drawCanvas()">
  <div class="clippingContainer">
    <canvas id="clippedCanvas" width="400" height="400">
    </canvas>
  </div>
</body>

</html>