JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://calebevans.me/projects/jcanvas/resources/jcanvas/jcanvas.min.js"></script>
<canvas id="myCanvas" width="500" height="400">
</canvas>

<div id="mouse-over-text">
    
</div>

JavaScript

var optionSize = {width:260,height:50};
var padding = 10;
var start = {x:150, y:150};
var options = [{text:'Step 1',id:'option-1'},{text:'Step 2',id:'option-2'},{text:'Step 3',id:'option-3'},{text:'SEE IT LIVE',id:'option-4'}];

$("#myCanvas").drawRect({
  layer: true,
  x: start.x, y: start.y,
  name:'main-box',
  strokeStyle:'black',
  strokeWidth: 1,
  width:280,
  height:250
});


$.each(options, function( index, value ) {
    var optX = start.x  ;
    var optY = start.y +(optionSize.height+padding)*index - 90;
      $("#myCanvas").drawRect({
          layer: true,
          x:  optX, y:  optY,
          strokeStyle:'black',
          strokeWidth: 1,
          name: value.id,
          width:optionSize.width,
          height:optionSize.height,
          mouseover: mouseIn,
          mouseout: mouseOut
    });
drawText(value.id, optX, optY);
});

function drawText(id, xVal, yVal ){
$("#myCanvas").drawText({
  layer:true,
    fillStyle: "black"  ,
  x: xVal + padding , y: yVal + padding/3,
  name:id,
  fontSize: 24,
  fontFamily: "Verdana, sans-serif",
  text:  getTextForId(id),
              mouseover: mouseIn,
          mouseout: mouseOut
});
}

function getTextForId(id){
    for (var i=0; i<options.length; i++){
        if (options[i].id == id)
            return options[i].text;
    }
    return '';
}

function mouseOut(layer){
$("#mouse-over-text").html('none options selected');
}

function mouseIn(layer){
$("#mouse-over-text").html(getTextForId(layer.name));
}