Firefox で canvas clearRect を使用すると、奇妙な問題に直面しました。クリッピング領域が設定されている場合、clearRect() はクリッピング領域と四角形の両方の外側にあるコンテンツを再描画してクリアします。それを再描画するため、これは問題を引き起こします。Chrome や IE などの他のブラウザでは正しく動作します。clearRect は、クリッピング領域外のコンテンツには影響しません。
コードは次のとおりです。
var canvas = document.getElementById("test");
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(255, 0, 0, 0.1)';
context.fillRect(0, 0, 40, 40);
context.beginPath();
context.rect(0, 0, 20, 20);
context.clip();
context.clearRect(10, 10, 20, 20); // causes an issue, see example below
実際のコード: http://jsfiddle.net/P8fyP/4/