Skip to main content

Modificar Canvas em tempo real

Como utilizar a tag canvas do HTML5, e fazer essa alteração em tempo real conforme eu insiro os dados no input. Já fiz o form e coloquei a tag canvas na página. Queria saber se no JQuery é possível alterar os dados que insiro no input e ao mesmo tempo altere a medida do canvas:

Codigo:

<input type="text"name="largura"/>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var largura = document.getElementById("largura").focus().value;
    var altura = document.getElementById("altura")..focus().value;
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(5,5,largura,altura);
</script>

Como seria a função no JQuery que alteraria essas variáveis em tempo real?