Problemi di tela con Chrome su Mac

Question

Ho cercato per molto tempo il motivo per cui il disegno, la cancellazione e il ridisegno di un rettangolo ruotato sull'elemento canvas non funziona in google chrome su mac.

Ho bisogno di questo perché voglio rendere una sovrapposizione al passaggio del mouse sulla tela.

ho creato un violino che rappresenta il mio codice: 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); 
}  

Questo funziona bene in tutti i browser su Windows e Mac ad eccezione di Chrome su Mac.

Quando ho commentare la riga

// ctx.rotate(angle); 

Il rettangolo viene disegnato sulla tela. (senza rotazione ovviamente)

Ho fatto qualcosa di sbagliato? O forse questo è un bug in Chrome?

Edit: Probabilmente non è un bug in Chrome a causa di questa pagina test funziona in Chrome su Mac:

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

Edit 2: Ho fatto qualche ricerca più su questo e ho trovato questo problema registrato : link

ho preso ci prova violino e aggiunto alcuni altri test con Ruota elementi canvas: link lettura lì informazioni, il problema è "risolto" quando si disegna su una tela più piccola.

Vedi qui i miei risultati del violino:

Quando cambio le dimensioni delle tele del violino sopra, che li rende solo 1 pixel più piccoli. Quindi i risultati sono ok.

Conclusione finale: Mi sembra di disegnare un rettangolo ruotato una volta. Ma quando uso il metodo clearRect per cancellare la tela, non riesco a disegnare di nuovo il rettangolo. Questo accade solo quando la dimensione della tela è abbastanza grande. (Più grande di 65600px)

Qualcuno di voi conosce una soluzione per questo in modo da poter disegnare e ridisegnare i rettangoli sulla tela utilizzando Chrome su Mac?

Mi sto facendo impazzire.

Answer 1

A giudicare dalla ricerca che hai fatto, sai già che si tratta di un bug del browser, quindi non puoi risolverlo da solo. Puoi, tuttavia, aggirare il problema usando tele più piccole adiacenti tra loro e disegnandole su ognuna con un diverso offset in modo che i bordi delle forme siano allineati.

Non è esattamente bello dal punto di vista del codice, ma visivamente sembrerà lo stesso e dovrebbe funzionare attorno al bug.

ho modificato il vostro violino per dimostrare: http://jsfiddle.net/z8f2f/35/