javascript - Why fill() property overwittern in canvas? -

I learn the html5 canvas when I try to draw 2 circles (a circle inside a circle). When I draw a circle and fill it, then it works when I attract the other circle and fill it, it turns into the first circle with the second type of style.

I try to make orange circle in a gray circle. I try it many times to solve it but by all means it gets the problem.

Please check my code and tell me whether I am wrong or what to fix this problem To do.

> I have the following code

  & lt ;! DOCTYPE html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Script src = "http://code.jquery.com/jquery-latest.min.js" type = "text / javascript" & gt; & Lt; / Script & gt; & Lt; Style & gt; Body {} #mycanvas {boundary: 1 px solid # 000; Margin: 0 px auto; Display area; } # Mycanvas1 {boundary: 1px solid # 000; Margin: 0 px auto; Display area; } & Lt; / Style & gt;  

& lt; Body & gt; & Lt; Canvas id = "mycanvas" width = "200" height = "200" & gt; Your browser does not support HTML5 Canvas tags. & Lt; / Canvas & gt; & Lt; Canvas id = "mycanvas1" width = "200" height = "200" & gt; Your browser does not support HTML5 Canvas tags. & Lt; / Canvas & gt; & Lt; Script type = "text / javascript" & gt; Var c = document.getElementById ("mycanvas"); Var B = document.getElementById ("mycanvas1"); Var d = document.getElementById ("mycanvas1"); Var ctx = c.getContext ("2D"); Var ctx1 = b.getContext ("2D"); Var ctx2 = d.getContext ("2D"); Ctx.fillStyle = "# bddfb3"; Ctx.fillRect (0,0,200,200); Ctx.moveTo (0,0); Ctx.lineTo (200,200); Ctx.stroke (); Ctx1.fillStyle = "# f1b147"; Ctx1.arc (100,100,80,0,360); Ctx1.fill (); Ctx2.fillStyle = "# 222"; Ctx2.arc (100,100,50,45,180); Ctx2.fill (); Ctx1.fillStyle = "#FFF"; Ctx1.font = "72px aerial"; Ctx1.fillText ("I", 90,125); & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt; This is an easy way to attract the orange circle inside a gray circle on the canvas.

  var canvas = document.getElementById ('canvas'), ctx = canvas.getContext ('2d'); // Orange Circle ctx.beginPath (); // centerX, center, radius, starting angle, end angle, counteract CTX.AC (100, 100, 50, 0, 2 * Math.PI, False); Ctx.fillStyle = 'orange'; Ctx.fill (); // Gray Circle ctx.lineWidth = 25; Ctx.strokeStyle = 'Gray'; Ctx.stroke ();  

  & lt; Canvas id = "canvas" width = "500" height = "250" & gt; & Lt; / Canvas & gt;