title: javascript: Display different color circles in different sizes
body: <p>I have a homework assignment that asks me to print two alternating circle colors with different sizes. The end-result would look like this:</p>
  <p><a href="https://i.stack.imgur.com/wBkbj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wBkbj.png" alt="enter image description here" /></a></p>
  <p>Right now, I am struggling to print the blue color circle on top of the red color circle and this is the code, i have written:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    canvas = document.getElementById("testCanvas");
      context = canvas.getContext("2d");
      
      centerX = canvas.width / 2;
      centerY = canvas.height / 2;
      
      //Creates a red color circle
      context.arc(centerX, centerY, 200, 0, 2 * Math.PI);
      context.fillStyle = 'red';
      context.fill();
      
      //Creates a blue color circle on top of the red color circle
      context.arc(centerX, centerY, 150, 0, 2 * Math.PI);
      // context.lineWidth=5;
      context.fillStyle = 'blue';
      context.stroke();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="testCanvas" width="400" height="400"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am having trouble with the last block of code because if I say fill() on the last line of code, then blue color dominates the canvas. Any help would be greatly appreciated. Thanks in advance.</p>