JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Canvas</h3>
Largura: <input type="text" data-prop="width" class="canvas-settings" value="100"><br>
Altura: <input type="text" data-prop="height" class="canvas-settings" value="100"><br>
<hr>
<h4>Retangulo</h4>
Altura: <input type="text" id="altura" value="30"><br>    
Largura: <input type="text" id="largura" value="30"><br>    
<hr>
<canvas id="myCanvas" height="100" width="100" style="border:1px solid red"></canvas>

JavaScript

$(document).ready(function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var largura = $("#largura").val();
    var altura = $("#altura").val();
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(5,5,largura,altura);
    $(this).on('keyup', 'input.canvas-settings', function(event){
        $("#myCanvas").css($(this).data('prop'), this.value);
    });
    
    $(this).on('keyup', '#altura', function(event){
        altura = $(this).val();
        ctx.fillRect(5,5,largura,altura);
    });
    $(this).on('keyup', '#largura', function(event){
        largura = $(this).val();
        ctx.fillRect(5,5,largura,altura);
    });
});