एचटीएमएल 5 कैनवास फ़ॉन्ट को अनदेखा किया जा रहा है

Question

मैं कुछ पाठ को कैनवास तत्व में लिखने की कोशिश कर रहा हूं, लेकिन ऐसा लगता है कि मैंने जो फ़ॉन्ट विकल्प डाले हैं उन्हें पूरी तरह अनदेखा किया जा रहा है। कोई फर्क नहीं पड़ता कि मैं उन्हें क्या बदलता हूं, यह सब एक ही आता है, जिसे मैं डिफ़ॉल्ट 10px संस-सेरिफ़ मानता हूं। मेरे पास जो है (यह फ़ंक्शन लोड पर चलता है)

function start() 
{ 
    canvas = document.getElementById('c'); 
    ctx = canvas.getContext('2d'); 
    ctx.fillStyle = "white"; 
    ctx.font = "12px monospace"; 
    ctx.textBaseline = "top"; 
} 

यह फ़ायरफ़ॉक्स या क्रोम में काम नहीं करता है।

Answer 1

यह पता चला है के रूप में, ctx.font परिवर्तन यह है कि fillText()

यह है कि यह एक आकर्षण की तरह काम करता है क्या कर रहा है एक ही समारोह में इस्तेमाल किया जाना चाहिए।

संपादित

उसकी टिप्पणी में आपका उल्लेख richtaur रूप में, यह जवाब गलत है। ctx.save() और ctx.restore() का उपयोग करके आपके संदर्भ को सहेजने और पुनर्स्थापित करने की आवश्यकता है क्योंकि जब आप कैनवास.getकॉन्टेक्स्ट ('2 डी') को फिर से कॉल करते हैं तो वर्तमान में रीसेट हो जाता है।

Answer 2

यह भी हो सकता है यदि आप कैनवास के आकार को रीसेट करते हैं। कम से कम, मैंने इसे क्रोम 23 में आज देखा।

context.font = 'bold 20px arial'; 
canvas.width = 100; 
canvas.height = 100; 
console.log(context.font); // gives '10px sans-serif'