मैक पर क्रोम के साथ कैनवास मुद्दे

Question

मैं कैनवास तत्व पर घूर्णन आयत के चित्रण, मिटाने और पुन: क्रॉलिंग के कारण लंबे समय से ढूंढ रहा हूं, मैक पर Google क्रोम में काम नहीं करता है।

मुझे इसकी आवश्यकता है क्योंकि मैं कैनवास पर होवर ओवरले प्रस्तुत करना चाहता हूं।

मैं एक फिडल कि मेरे कोड का प्रतिनिधित्व करता है बना लिया है: link

एचटीएमएल:

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

जावास्क्रिप्ट:

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); 
}  

इस के अलावा खिड़कियों पर सभी ब्राउज़रों में ठीक काम करता है और मैक मैक पर क्रोम।

जब मैं लाइन

// ctx.rotate(angle); 

बाहर टिप्पणी आयत कैनवास पर तैयार की है। (पाठ्यक्रम के घूर्णन के बिना)

क्या मैंने कुछ गलत किया? या यह क्रोम में शायद एक बग है?

संपादित करें: शायद क्रोम में नहीं एक बग क्योंकि इस परीक्षण पृष्ठ मैक पर क्रोम में काम करता है:

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

संपादित करें 2: मैं इस पर कुछ और अधिक शोध कर रहा हूँ और मैं इस मुद्दे को लॉग इन पाया : link

मैं वहाँ परीक्षण बेला लिया और घूमता है कैनवास तत्वों के साथ कुछ और परीक्षण कहा: link वहाँ की जानकारी पढ़ना, समस्या है जब आप एक छोटे कैनवास पर आकर्षित "हल" है।

यहाँ बेला के अपने परिणाम देखें:

जब मैं ऊपर बेला में कैनवस के आकार बदलने के लिए, उन्हें बनाने सिर्फ छोटे 1pixel। फिर परिणाम ठीक हैं।

अंतिम निष्कर्ष: ऐसा लगता है कि मैं एक घुमाया आयत एक बार आकर्षित कर सकते हैं। लेकिन जब मैं कैनवास को मिटाने के लिए clearRect विधि का उपयोग करता हूं, तो मैं आयत को दोबारा नहीं खींच सकता। यह तब होता है जब कैनवास का आकार काफी बड़ा होता है। (65600px से बड़ा)

क्या आप में से कोई भी इसके लिए एक सॉल्यूशन जानता है, इसलिए मै मैक पर क्रोम का उपयोग कर कैनवास पर आयत खींचा और फिर से खींचा सकता हूं?

मैं इसके बारे में पागल हो रहा हूं।

Answer 1

आपके द्वारा किए गए शोध के आधार पर आप पहले ही जानते हैं कि यह एक ब्राउज़र बग है, इसलिए आप इसे स्वयं से ठीक नहीं कर सकते हैं। हालांकि, आप एक दूसरे के समीप छोटे कैनवास का उपयोग कर समस्या के चारों ओर काम कर सकते हैं और प्रत्येक को अलग ऑफसेट के साथ चित्रित कर सकते हैं ताकि आपके आकार के किनारों को गठबंधन किया जा सके।

यह कोड के दृष्टिकोण से बिल्कुल अच्छा नहीं है, लेकिन दृष्टि से यह वही दिखाई देगा और इसे बग के आसपास काम करना चाहिए।

मैं प्रदर्शित करने के लिए अपने बेला संशोधित कर लिया है: http://jsfiddle.net/z8f2f/35/