JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="500" height="500" id="myCanvas"></canvas>
<form id="myForm">
  <select id="colorDropdown">
    <option>Select a Background Color</option>
  </select>
</form>
<button onclick="clearCanvas">Clear Canvas</button>

JavaScript

let selectElement = document.getElementById('colorDropdown'),
options = ["BlueViolet", "Crimson", "DarkSalmon", "OliveDrab", "SaddleBrown"];

for (let i = 0 ; i < options.length - 1; i++) {
  let opt = options[i];
  let optionList = document.createElement("option");
  optionList.textContent = opt;
  optionList.value = opt;
  selectElement.appendChild(optionList)
}

document.getElementById('colorDropdown').onchange = function() {
  let c = document.getElementById("myCanvas");
  let ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.rect(20, 20, 150, 100);
  ctx.fillStyle = document.getElementById('colorDropdown').value;

  ctx.fill();
};