Canvas issues with Chrome on Mac

Question

I've been looking for a long time for the reason why the drawing, erasing and redrawing of a rotated rectangle on the canvas element does not work in google chrome on mac.

I need this because i want to render a hover overlay on the canvas.

I've created a Fiddle that represents my code: link

Html:

<canvas id="canvas"  width="400" height="165" style="left: 0px; top: 0px; background-color:red;"></canvas>

Javascript:

var canvas =null;
var ctx;
var target;

$(function() {
        canvas=document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        target = { h:81, id:"i1_2", isempty:false, r:-11.64, w:60, x:143, y:19, zindex:2};
});

function drawRectangle() {
        ctx.save();
        ctx.translate(target.x, target.y);
        ctx.fillStyle = "green";
        ctx.strokeStyle = "blue";
        ctx.globalAlpha = 0.40;
        ctx.rotate(target.r / 180 * Math.PI); //NO Rotation => It works!
        ctx.fillRect(0,0,target.w,target.h);
        ctx.restore();   
}

function clearRectangle() {
    ctx.clearRect(0,0,400,165);
}    

This works fine in all browsers on windows and mac except for Chrome on Mac.

When i comment out the line

// ctx.rotate(angle);

The rectangle is drawn on the canvas. (without rotation of course)

Did I do something wrong? Or is this maybe a bug in Chrome?

Edit: Probably not a bug in Chrome because this test page works in chrome on Mac:

http://www.html5canvastutorials.com/demos/advanced/html5_canvas_transform_rotate/

Edit 2: I've been doing some more research on this and i found this issue logged: link

I took there test fiddle and added some more tests with rotates canvas elements: link Reading there info, the problem is "solved" when you draw on a smaller canvas.

See here my results of the fiddle:

When I change the sizes of the canvases in the above fiddle, making them just 1pixel smaller. Then the results are ok.

Final conclusion: It seems I can draw a rotated rectangle once. But when i use the clearRect method to erase the canvas, I cannot draw the rectangle again. This only happens when the size of the canvas is big enough. (Bigger than 65600px)

Does anyone of you knows a sollution for this so i can draw and redraw rectangles on the canvas using chrome on mac?

I'm getting crazy about this.

Answer 1

Judging by the research you've done you're already aware this is a browser bug, so you can't fix it yourself per se. You can, however, work around the problem by using smaller canvases adjacent to each other and drawing on each one with a different offset so the edges of your shapes are aligned.

It's not exactly nice from the point of view of the code, but visually it will look the same and it should work around the bug.

I've modified your fiddle to demonstrate: http://jsfiddle.net/z8f2f/35/