transformed-clip.html
<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>
