Change text color from canvas with Select option

Question

I have a canvas and I can introduce text into it. I'm trying to change the color of that text from canvas using Select object but I failed. Can someone help me with this one? This is the code and thank you for your time.

Here is JS for text introduction into the canvas:

$(function(){

   var canvas=document.getElementById("canvas");
   var ctx=canvas.getContext("2d");

   ctx.font= "bold 90px Arial";
   ctx.textAlign="center";

   var $text1=document.getElementById("sourceText1");

   $text1.onkeyup=function(e){ redrawTexts(); }

   function redrawTexts(){
       ctx.clearRect(0,0,canvas.width,canvas.height);
       wrapText(ctx,$text1.value,66.5, 82,"Arial");

   }

   function wrapText(context, text, x, y, maxWidth, fontSize, fontFace){
      var words = text.split(' ');
      var line = '';
      var lineHeight=fontSize;

      context.font=fontSize+" "+fontFace;

      for(var n = 0; n < words.length; n++) {
          var testLine = line + words[n] + ' ';
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if(testWidth > maxWidth) {
             context.fillText(line, x, y);
             line = words[n] + ' ';
             y += lineHeight;
          }
          else {
             line = testLine;
          }
      }
      context.fillText(line, x, y);
      return(y);
   }

 }); // end $(function(){});

And here is JS for changing the color:

  var main8 = document.getElementById("canvas");
  var render8 = main8.getContext("2d");

  function color(v8) {
    switch(v8) {
     // top: 103px; left: 210px
        case "green":
            main8.fillStyle = 'green';
            break;

        case "red":
            main8.fillStyle = "#ff3300";
            break;
            }
  }

Here is HTML:

 <input id="sourceText1" type="text" style="height: 32px;width: 223px;">

 <select name="colours" onchange="color(this.value)">
        <option value="blue">Blue</option>
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="green">Green</option>
 </select>

Here is the CSS:

  #canvas{border:2px dotted transparent;
  border-radius: 5px;
   }

Answer 1

You are setting fillStyle on main8, which is the canvas element.
The property should be set on the canvas context, i.e. main8.getContext("2d").

Moreover you should also redraw the text via your redrawTexts function.

function color(v8) {
  switch(v8) {
   // top: 103px; left: 210px
      case "green":
          main8.getContext("2d").fillStyle = 'green';
          break;

      case "red":
          main8.getContext("2d").fillStyle = "#ff3300";
          break;
  }
  redrawTexts();
}

Try it out:

  var canvas=document.getElementById("canvas");
  var ctx=canvas.getContext("2d");

  ctx.font= "bold 90px Arial";
  ctx.textAlign="center";

  var $text1=document.getElementById("sourceText1");

  $text1.onkeyup=function(e){ redrawTexts(); }

  function redrawTexts(){
      ctx.clearRect(0,0,canvas.width,canvas.height);
      wrapText(ctx,$text1.value,66.5, 82,"Arial");

  }

  function wrapText(context, text, x, y, maxWidth, fontSize, fontFace){
     var words = text.split(' ');
     var line = '';
     var lineHeight=fontSize;

     context.font=fontSize+" "+fontFace;

     for(var n = 0; n < words.length; n++) {
         var testLine = line + words[n] + ' ';
         var metrics = context.measureText(testLine);
         var testWidth = metrics.width;
         if(testWidth > maxWidth) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
         }
         else {
            line = testLine;
         }
     }
     context.fillText(line, x, y);
     return(y);
  }

  var main8 = document.getElementById("canvas");
  var render8 = main8.getContext("2d");

  function color(v8) {
    switch(v8) {
     // top: 103px; left: 210px
        case "green":
            main8.getContext("2d").fillStyle = 'green';
            break;

        case "red":
            main8.getContext("2d").fillStyle = "#ff3300";
            break;
    }
    redrawTexts();
  }

#canvas{border:2px dotted transparent;
  border-radius: 5px;
  display: block;
 }

<input id="sourceText1" type="text" style="height: 32px;width: 223px;">

 <select name="colours" onchange="color(this.value)">
        <option value="blue">Blue</option>
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="yellow">Yellow</option>
        <option value="green">Green</option>
 </select>
 
<canvas id="canvas" width="300" height="300"></canvas>