transformed-clip.html

Enable keyboard shortcuts

<html>

<body>

  <canvas width="500" height="500"></canvas>

<script>

  var canvas = document.getElementsByTagName('canvas')[0];

  var ctx = canvas.getContext('2d');

  ctx.translate(500, 500);

  ctx.fillStyle = "red";

  ctx.beginPath();

  ctx.rect(-250, -250, 50, 50);

  ctx.clip();

  ctx.fillRect(-500,-500,500,500);

</script>

</body>

</html>