JSFiddle - React, Tailwind, and code Playground

by Gabriel Oshiro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Largura: <input type="text" class="canvas-attr" id="largura" value="100"/><br/>
Altura: <input type="text" class="canvas-attr" id="altura" value="100"/><br/>

<canvas id="c" height="100" width="100" style="border:1px solid red"></canvas>

JavaScript

// Quando a largura ou a altura forem alteradas
$(".canvas-attr").on('change',function() {
    // Muda a largura e a altura do canvas
    var c = $("#c");
    c.attr("width",$("#largura").val());
    c.attr("height", $("#altura").val());

    // Cria variáveis com os valores de altura e largura
    var ctx = c[0].getContext("2d");
    var largura = $("#largura").val();
    var altura = $("#altura").val();
    
    // Cor vermelha para o preenchimento
    ctx.fillStyle = "#FF0000";
    // Colore o canvas inteiro
    ctx.fillRect(0,0,largura,altura);
});