Canvas: clearRect after clip causes an issue in Firefox

Question

I've faced weird issue using canvas clearRect in Firefox. If clipping region is set, clearRect() redraws a content which is outside both clipping region and rectangle to clear. Since it redraws it over this causes an issue. It works correct in other browsers, like Chrome and IE - clearRect doesn't affect the content outside clipping region.

Here's the code:

        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

Code in action: http://jsfiddle.net/P8fyP/4/

Answer 1

I tested your code at firefox 18 and firefox nightly 21 and I can't find a problem. The code do what it is supposed to do.