Skip to main content
3 de 5
Adicionando tag relativo a linguagem de programação utilizada

Modificar Canvas em tempo real

Olá, gostaria de utilizar a tag canvas do HTML5, e gostaria de fazer essa alteração em tempo real conforme eu insiro os dados no input. No caso, eu 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 ex:

<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?