ブログでHTML5 Canvas クリップ

クリップ

何かを描く時、描く範囲を制限したい時があります。
それがクリッピングです。

<canvas id="drawClippedRectangleCanvas" width="300" height="300"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawClippedRectangleCanvas");
        var context = canvas.getContext("2d");
        context.rect(100, 100, 200, 200);
        context.stroke();
        context.clip();
        context.fillRect(0, 0, 200, 200);
    })();
</script>

context.clip()を呼ぶと、その後、それまでのパスの内部でしか描かれなくなります。
例えばこのサンプルでは、(100, 100, 200, 200)の正方形でクリップしています。
その正方形の内部にしか今後描かれなくなっている、ということです。
そのため(0, 0, 200, 200)の正方形を描いても、その一部しか描かれていないというわけですね。