JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<canvas id="c4" width="580" height = "580" ></canvas>
<div>

  <select   name="rooms" onchange="path(this.value)">
  <option value="">Please select</option>
  <option value="B223">B223</option>
  <option value="C174">C174</option>
  <option value="B170">B170</option>
  <option value="B220">B220</option>
</select>

</div>

CSS

canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(pretendcollege.jpg) }

JavaScript

var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");

function path(v) {
  switch(v) {
    case "B220":
    c4_context.beginPath();
    c4_context.moveTo(295, 473);
    c4_context.lineTo(295, 286);
    c4_context.lineTo(94, 286);
    c4_context.strokeStyle = "Red";
    c4_context.stroke();
  break;
case "C174":
  c4_context.beginPath();
    c4_context.moveTo(295, 473);
    c4_context.lineTo(295, 82);
    c4_context.lineTo(118, 82);
    c4_context.strokeStyle = "Blue";
    c4_context.stroke();
  break;
}
}