title: How to change the color of a canvas using javascript?
body: <p>I know how to do this very easily in CSS but I wanted to know how you would make the default white canvas black using Javascript. I got the total number of circles that I want on top of the background but every attempt I make to change background color gets rid of my circles.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang=&quot;en&quot;&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;Loops Homework&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id=&quot;myCanvas&quot; width=&quot;800&quot; height=&quot;600&quot;&gt;&lt;/canvas&gt;
  &lt;script src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Javascript:</p>
  <pre><code>var canvas = document.getElementById(&quot;myCanvas&quot;);
  var ctx = canvas.getContext('2d');
  
  
  
  for(var i = 0; i &lt; 10; i++) {
  
  ctx.fillStyle=&quot;rgba(255,0,0,0.8)&quot;;
  
  
  fillCircle(200,200,i*2);
  
  fillCircle(150,200,i*2);
  
  fillCircle(100,200,i*2);
  
  fillCircle(0,200,i*2);
  
  fillCircle(50,200,i*2);
  
  fillCircle(250,200,i*2);
  
  fillCircle(300,200,i*2);
  
  fillCircle(350,200,i*2);
  
  fillCircle(400,200,i*2);
  
  fillCircle(450,200,i*2);
  }
  
  
  var width = window.innerWidth;
  var height = 100;
  
  
  function fillCircle(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.closePath();
  ctx.fill();
  }
  </code></pre>