ブログでHTML5 Canvas クリア

クリア

ここまでは描いたきり何もしませんでした。
ここでは描いたものを消しましょう。

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

このプログラムはキャンバス全体をまず黒で塗りつぶします。
その後真ん中をクリアします。

context.clearRect(x, y, width, height);

は、長方形の領域をクリアします。
xはクリアする長方形の左上のx座標です。
yはクリアする長方形の左上のy座標です。
widthはクリアする長方形の横幅です。
heightはクリアする長方形の縦幅です。