JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <input id="rect_height_input" type="text" value="50">
  <input id="rect_width_input" type="text" value="50">
  <select id="color_list">
      <option value="red">red</option>
      <option value="black">black</option>
  </select>
  <button id="add_shape">Add Shape</button>
</div>
<div id="work_area">
</div>

CSS

canvas {
    background-color: #ccc; /* Added to show the actual size */
}

JavaScript

$('#add_shape').click(function() {
    
    var rectWidth = $('#rect_width_input').val();
    var rectHeight = $('#rect_height_input').val();
    rectHeight = (rectHeight > 0) ? rectHeight : rectWidth;

    var elementID = 'canvas' + $('canvas').length;
    
    $('<canvas>').attr({
        id: elementID
    }).css({
        width: rectWidth + 'px',
        height: rectHeight + 'px'
    }).appendTo('#work_area');

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

    ctx.fillStyle = $('#color_list option:selected').val();
    ctx.fillRect(0, 0, rectWidth, rectHeight); // This isn´t filling the entire rectangle
});