दुर्लभ अवसर पर, <canvas> पुनः बनाने नहीं करता

Question

मैं <canvas> का उपयोग अपने संगीत शिक्षा वेब एप्लिकेशन में सभी नोट और ग्लिफ़ आकर्षित करने के लिए: http://www.musictheory.net/exercises/keysig/bc98yy

एक फ़ायरफ़ॉक्स 15.0.1 उपयोगकर्ता ने बताया है कि कभी कभी व्यायाम करने के लिए पर चला जाता है अगला प्रश्न, लेकिन कैनवास अभी भी पिछले प्रश्न दिखाता है। मैंने इसे एक बार परीक्षण में देखा है (~ 500 प्रश्नों में से)।

जब यह तब होता है, कैनवास दोनों canvas.width = canvas.width और संदर्भ और ग्लिफ़ पर .clearRect के लिए एक कॉल के माध्यम से मंजूरी दे दी है के माध्यम से .beginPath, .quadraticCurveTo, .closePath, आदि हालांकि, यह कैनवास के समर्थन बफर की तरह कभी नहीं लगता है कि जावास्क्रिप्ट में तैयार की गई है खिड़की में फिसल/खींचा जाता है।

• https://bugzilla.mozilla.org/show_bug.cgi?id=787623
• https://bugzilla.mozilla.org/show_bug.cgi?id=794337
• http://code.google.com/p/chromium/issues/detail?id=55339

मैं एक डोम करके एक redraw मजबूर कर सकते हैं इस तरह के रूप में डालने हैक:

मैं इसी तरह के मुद्दों के बारे में अतीत में बग रिपोर्ट को देखा है कैनवास के बच्चे के रूप में एक टेक्स्ट नोड, और उसके बाद इसे अगले रन लूप चक्र पर हटा देना, या पृष्ठभूमि-रंग या पैडिंग को संशोधित करना कैनवास। हालांकि, यह भारी हाथ में लगता है, और मुझे नाराज लग रहा है कि मुझे कुछ स्पष्ट याद आ रहा है।

मेरे ड्राइंग कोड काफी सरल है:

canvas.width = width; 
ctx.clearRect(0, 0, width, height); 
ctx.save(); 
// Lots of drawing code here 
ctx.restore() 
ctx.clearRect(0, 0, 1, 1); // Helped force a repaint on some older WebKit browsers? 

मैं सुनिश्चित किया है कि .save और .restore कॉल की संख्या संतुलित हैं।

1) मैं इस कोड को onclick ईवेंट हैंडलर के जवाब में सीधे कॉल कर रहा हूं। क्या मुझे भविष्य में रन लूप चक्र पर ड्राइंग करने के लिए requestAnimationFrame या setTimeout का उपयोग करना चाहिए?

2) मुझे canvas.pleaseRepaintNow() एपीआई की तरह कुछ स्पष्ट नहीं है, है ना?

3) क्या अन्य लोगों को समान मुद्दों का सामना करना पड़ा है और डीओएम संशोधन का पुनर्वितरण करने के लिए संशोधन किया गया है?

Answer 1

मैंने बग होने की कोशिश की लेकिन थोड़ी देर के लिए फ़ायरफ़ॉक्स में पागल क्लिक करने के बाद, मैंने इसे कभी नहीं देखा। इस तरह मैं कैनवास जो काम करने के लिए लगता है स्पष्ट है, लेकिन एक अलग नज़रिए उसे अपने साथ ले के बाद से मैं बग मैं भी हो को यह कुछ भी ठीक करता है, तो देखने के लिए जाँच नहीं कर सकते हैं नहीं मिल सकता है ...

// Store the current transformation matrix 
ctx.save(); 

// Use the identity matrix while clearing the canvas 
ctx.setTransform(1, 0, 0, 1, 0, 0); 
ctx.clearRect(0, 0, canvas.width, canvas.height); 

// Restore the transform 
ctx.restore(); 

Answer 2

context.stroke(); अपने onLoad फ़ंक्शन की अंतिम पंक्ति में जोड़ें, यह फ़ायरफ़ॉक्स में एक बग को ठीक करता है। अन्यथा कैनवास में परिवर्तन तब तक प्रस्तुत नहीं होते जब तक कि विंडो को फिर से खींचा नहीं जाता है।

यह मेरे मामले में कम से कम काम करता था।

window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    context = canvas.getContext("2d"); 
    //Code here... 
    context.stroke(); 
}