मैं अपने HTML5 कैनवास में अलग-अलग रंगों की दो पंक्तियां क्यों नहीं खींच सकता?

Question

मैं एक हरे रंग की रेखा के बाईं ओर एक लाल रेखा खींचने के लिए एचटीएमएल 5 कैनवास का उपयोग करने की कोशिश कर रहा हूं। यहां मेरा जावास्क्रिप्ट है:

var canvas = document.createElement('canvas'); 
canvas.height = 150; 
canvas.width = 150; 
var canvasContext = canvas.getContext('2d'); 
canvasContext.beginPath(); 

// Draw the red line. 
canvasContext.strokeStyle = '#f00'; 
canvasContext.moveTo(10, 0); 
canvasContext.lineTo(10, 100); 
canvasContext.stroke(); 

// Draw the green line. 
canvasContext.moveTo(50, 0); 
canvasContext.strokeStyle = '#0f0'; 
canvasContext.lineTo(50, 100); 
canvasContext.stroke(); 

document.body.appendChild(canvas);​ 

हालांकि, Google क्रोम में, मुझे हल्के हरे रंग की रेखा के बाईं ओर एक गहरा हरा रेखा मिलती है। क्यूं कर? मैंने स्ट्रोक को दो बार सही कहा? इसलिए, मेरा पहला स्ट्रोक क्यों मेरे दूसरे को प्रभावित करेगा?

Here एक जेएसफ़िल्ड है जो मेरा मतलब बताता है।

Answer 1

जब आप अपनी दूसरी पंक्ति खींचना शुरू करते हैं तो आप canvasContext.beginPath(); पर कॉल नहीं कर रहे हैं।

ड्राइंग वर्गों और अधिक स्वतंत्र बनाने के लिए, मैं खाली स्थान के कहा:

var canvas = document.createElement('canvas'); 
canvas.height = 150; 
canvas.width = 150; 

var canvasContext = canvas.getContext('2d'); 

// Draw the red line. 
canvasContext.beginPath(); 
canvasContext.strokeStyle = '#f00'; 
canvasContext.moveTo(10, 0); 
canvasContext.lineTo(10, 100); 
canvasContext.stroke(); 

// Draw the green line. 
canvasContext.beginPath(); 
canvasContext.moveTo(50, 0); 
canvasContext.strokeStyle = '#0f0'; 
canvasContext.lineTo(50, 100); 
canvasContext.stroke(); 

document.body.appendChild(canvas); 

डेमो: http://jsfiddle.net/AhdJr/2/

Answer 2

बहुत ही दिलचस्प जहाँ तक मैं जिस तरह से WebGL बता सकते हैं या ओपन काम एक बड़े राज्य मशीन है, जहां आप एक राज्य को परिभाषित,, आकर्षित अद्यतन राज्य फिर से आकर्षित, और इतने पर ...

हालांकि की तरह है मुझे यकीन नहीं है कि कैनवास एक ही सिद्धांतों का पालन करता है भले ही इसका मतलब सरल 2 डी प्रस्तुतिकरणों के लिए हो।

मैं इसे एक नया रास्ता शुरू करने के लिए काम करने में कामयाब रहा।

var canvas = document.createElement('canvas'); 
canvas.height = 150; 
canvas.width = 150; 
var canvasContext = canvas.getContext('2d'); 
canvasContext.beginPath(); 

// Draw the red line. 

canvasContext.moveTo(10, 0); 
canvasContext.lineTo(10, 100); 
canvasContext.strokeStyle = '#FF0000'; 
canvasContext.stroke(); 

canvasContext.beginPath(); // begin new path 
// Draw the green line. 
canvasContext.moveTo(50, 0); 
canvasContext.strokeStyle = '#00FF00'; 
canvasContext.lineTo(50, 100); 
canvasContext.stroke(); 

document.body.appendChild(canvas);​ 

मेरे पास वेबग्लू के साथ सीमित अनुभव है, इसलिए यदि मैं गलत हूं तो कृपया मुझे सही करें।