एचटीएमएल 5 कैनवास - विभिन्न स्ट्रोक

Question

मुझे 3 अलग-अलग लाइनों के साथ ग्राफ बनाना है। एक रेखा ग्राफ।

मैं यह कर की कोशिश की:

function draw() 
{ 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d");  
    ctx.lineWidth=10; 

    ctx.strokeStyle="teal"; 
    ctx.moveTo(10,CompanyA[0]); 
    ctx.lineTo(110,CompanyA[1]); 
    ctx.lineTo(210,CompanyA[2]); 
    ctx.stroke(); 


    ctx.strokeStyle="green"; 
    ctx.moveTo(10,CompanyB[0]); 
    ctx.lineTo(110,CompanyB[1]); 
    ctx.lineTo(210,CompanyB[2]); 
    ctx.stroke();  

    ctx.strokeStyle="yellow"; 
    ctx.moveTo(10,CompanyC[0]); 
    ctx.lineTo(110,CompanyC[1]); 
    ctx.lineTo(210,CompanyC[2]); 
    ctx.stroke(); 
} 

लेकिन जाहिरा तौर पर, पिछले स्ट्रोक सभी लाइनों के लिए छोड़ता है। इसलिए मुझे एक टील, एक हरा और पीला एक के बजाय 3 पीले रंग की रेखाएं मिलती हैं। मैंने तीन अलग-अलग संदर्भ (सीटीएक्स 1, सीटीएक्स 2 और सीटीएक्स 3) बनाने की कोशिश की, लेकिन किसी कारण से, सभी को "ctx3.stroke()" कॉल के साथ खींचा गया।

ऐसा करने का सही तरीका क्या होगा?

Answer 1

हर पंक्ति से पहले एक ctx.beginPath() कॉल जोड़ें, और यह भी एक ctx.closePath() हर ctx.stroke()

के बाद आप नहीं, हर बार जब आप stroke() विधि, न केवल नई लाइन तैयार किया जाएगा, लेकिन यह भी सभी पिछले कॉल करते हैं लाइनें फिर से खींची जाएंगी (नए स्ट्रोक स्टाइल के साथ), क्योंकि यह वही लाइन पथ है जो अभी भी खुला है।

Answer 2

हालांकि यहां एक कार्यात्मक उत्तर है, लेकिन मैं इसे जोड़ना चाहता हूं।

var ctx1 = canvas.getContext("2d"); 
var ctx2 = canvas.getContext("2d"); 
var ctx3 = canvas.getContext("2d"); 

वे सभी एक ही वस्तु का संदर्भ देते हैं। यह एक नया संदर्भ नहीं बनाता है, यह उस व्यक्ति का उपयोग करता है जो पहले से ही कैनवास तत्व से जुड़ा हुआ है। डेल्टा पूरी तरह से कह रही है कि यह पूरे रास्ते पर पीले रंग का स्ट्रोक है क्योंकि आपने एक नया रास्ता शुरू नहीं किया है। ctx.beginPath() आपकी परेशानियों को हल करेगा।