title: How do I put color into a rectangle in a canvas using a dropdown list onchange event
body: <p>I have been trying to get the rectangle in the canvas to appear and try an fill it with color corresponding to the color on the drop down menu but i just cannot seem to get around it, any suggestions? (coursework)
  <strong>strong text</strong>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = init;
  window.onload = myFunction;
  
  function init() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "white";
    ctx.fillRect(20, 20, 10, 60);
    ctx.fillRect(70, 20, 10, 60);
    ctx.fillRect(120, 20, 10, 60);
    ctx.fillRect(170, 20, 10, 60);
  }
  
  
  function changeColor() {
    var eID = document.getElementById("colors");
    var colorVal = eID.options[eID.selectedIndex].value;
    var colortxt = eID.options[eID.selectedIndex].text;
    document.getElementById('colorDiv').style.background = colortxt;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
     &lt;div id="content "&gt;
        &lt;center&gt;
           &lt;canvas id="colorDiv " width="300 " height="300 " style="border:1px solid #c3c3c3; "&gt;
           &lt;/canvas&gt;
           &lt;select id="colors " onchange="changeColor() "&gt;
              &lt;option value="1 "&gt;Black&lt;/option&gt;
              &lt;option value="2 "&gt;Brown&lt;/option&gt;
              &lt;option value="3 "&gt;Red&lt;/option&gt;
              &lt;option value="4 "&gt;orange&lt;/option&gt;
              &lt;option value="5 "&gt;Yellow&lt;/option&gt;
              &lt;option value="6 "&gt;Blue&lt;/option&gt;
              &lt;option value="7 "&gt;Violet&lt;/option&gt;
              &lt;option value="8 " selected="selected "&gt;Grey&lt;/option&gt;
           &lt;/select&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>