Problemas de Canvas con Chrome en Mac

Question

He estado buscando durante mucho tiempo la razón por la que el dibujo, borrado y redibujado de un rectángulo girado en el elemento canvas no funciona en google chrome en mac.

Lo necesito porque quiero renderizar una superposición de desplazamiento sobre el lienzo.

He creado un violín que representa mi código: 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); 
}  

Esto funciona bien en todos los navegadores en Windows y Mac a excepción de Chrome en Mac.

Cuando comento hacia fuera de la línea de

// ctx.rotate(angle); 

El rectángulo se dibuja en el lienzo. (sin rotación, por supuesto)

¿Hice algo mal? ¿O es esto quizás un error en Chrome?

Editar: Probablemente no es un error en Chrome porque este página de prueba funciona en Chrome en Mac:

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

Edición 2: He estado haciendo algunas investigaciones más sobre esto y me encontré con este problema registra : link

me llevó allí violín prueba y añadido algunas más pruebas con Gira elementos canvas: link lectura hay información, el problema está "resuelto" cuando se dibuja sobre un lienzo más pequeño.

Ver aquí mis resultados del violín:

Cuando cambio el tamaño de los lienzos en el violín anterior, por lo que acaba de 1pixel más pequeño. Entonces los resultados están bien.

Conclusión final: Parece que puedo dibujar un rectángulo girado una vez. Pero cuando uso el método clearRect para borrar el lienzo, no puedo dibujar el rectángulo nuevamente. Esto solo ocurre cuando el tamaño del lienzo es lo suficientemente grande. (Más grande que 65600px)

¿Alguien de ustedes conoce una solución para esto, así que puedo dibujar y volver a dibujar rectángulos en el lienzo usando chrome en mac?

Me estoy volviendo loco acerca de esto.

Answer 1

A juzgar por la investigación que ha realizado, ya sabe que se trata de un error del navegador, por lo que no puede solucionarlo usted mismo. Sin embargo, puede solucionar el problema utilizando lienzos más pequeños uno junto al otro y dibujando en cada uno un desplazamiento diferente para que los bordes de sus formas estén alineados.

No es exactamente agradable desde el punto de vista del código, pero visualmente se verá igual y debería funcionar alrededor del error.

He modificado su violín a demostrar: http://jsfiddle.net/z8f2f/35/