javascript - キャンバスを「円」として設定 - 円の外側には何も描画できません

Question

キャンバス要素を作成し、幅と高さを設定しました。

次に、キャンバスが円のように見えるように、キャンバスの ID に border-radius を設定しました。

ただし、円領域の外側に何かを描画すると、コード例に示すように、引き続き描画されます: http://jsfiddle.net/mN9Eh/

JavaScript :

<script>
function animate() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    ctx.save();
    ctx.clearRect(0, 0, c.width, c.height);

    if(i > 80) {
        i = 1;
    }

    if( i > 40) {
        ctx.beginPath();
        ctx.arc(50, 50, i-40, 0, 2 * Math.PI, true);
        ctx.fillStyle = "#FF0033";
        ctx.fill();
    }

    i++;

    ctx.restore();

    setTimeout(animate, 10);
}

var i = 0;
animate();
</script>

CSS :

#myCanvas {
    background: #333;
    border-radius: 300px;
}

HTML :

<canvas id="myCanvas" width="300" height="300"></canvas>

CSS 変換を canvas 要素に適用できない (つまり、要素の代わりに CSS で幅を設定するとうまくいかない) ということを読んだことを覚えています。キャンバス要素を修正して、円の外側に描画できない円として表示するにはどうすればよいですか (または、円の外側に描画された場合、少なくともユーザーには表示されません)。