एक रास्ते में अलग अलग रंगों आकार ड्राइंग (एचटीएमएल 5 कैनवास/Javascript)

Question

मैं कई चक्र अलग अलग रंग

 //-------------- draw 
     ctx.beginPath(); 
     ctx.fillStyle = "black"; 
     ctx.arc(30, 30, 20, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.fillStyle = "red"; 
     ctx.arc(100, 100, 40, 0, Math.PI*2, true); 
     ctx.fill(); 
     ctx.closePath(); 

से भर आर्क्स आकर्षित करने के लिए यह लाल रंग के साथ में भरा दोनों आर्क्स पैदा करता है, और मैं बता सकता है कि कोशिश कर रहा हूँ छोटे के चारों ओर एक बेहोश काला रूपरेखा है।

किसी को भी मैं यह कैसे पूरा कर सकते हैं पर कुछ प्रकाश डाला सकता है? मैं क्या गलत कर रहा हूँ?

Answer 1

पथ बंद करें और फिर इसे फिर से खोलें।

ctx.closePath(); 
ctx.beginPath(); 

jsFiddle।

... आर्क ड्राइंग कोड के बीच।

Answer 2

एक रास्ता beginPath साथ शुरू होता है और endPath साथ समाप्त होता है। बीच में हर चीज एक ही रास्ता है। विंगिंग नियमों का उपयोग करके आप उनमें छेद के साथ पथ भी खींच सकते हैं। एक दिशा में कुछ और कुछ और विपरीत दिशा में खींचे लेकिन पहली चीज़ के अंदर। चलो लाइनों का उपयोग कर बीच में एक छेद के साथ एक आयत खींचें। startPath(); चाल (10,10); लाइन (100,10); lineTo ((100,60); lineTo (10,60); lineTo (10,10); closePath(); moveTo (20,20); lineTo (20,50); lineTo (90 , 50); lineTo (90,20); lineTo (20,20); closePath(); endPath(); भरने();

आप किसी भी आकार के साथ ऐसा कर सकता है एक चाप का प्रयास करें। एक दिशा में फिर एक छोटे त्रिज्या