Modify Canvas in real time

Asked

Viewed 1,201 times

4

How can I use the tag canvas HTML5 and make this change in real time as I input the data into input? I’ve already done the form and put the tag canvas page. I was wondering if JQuery it is possible to change the data entered in input and at the same time change the measure of canvas:

Code: 

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

How would the function in the JQuery that would change these variables in real time?

javascript jquery html5 canvas

  • Type what would you like to change? Sizes? Color? Position?

  • Opa Fernando, watch the attention! I wanted to change the size for now. I actually want to change the whole canvas structure, but to start I wanted to know how to change the width and height of the rectangle. But it would have to occur as the value is entered in the input.

  • Just a comment, this is wrong document.getElementById("altura")..focus().value; the broker is document.getElementById("altura").focus().value;

2 answers

3


Yes, you can do this at the event keyup as in the example:

$(document).ready(function() { // Ao carregar a página
    $(this).on('keyup', 'input.canvas-settings', function(event){ // Ao soltar a tecla no input
        // Canvas.css( atributo data-prop do input, valor do input)
        $("canvas").css($(this).data('prop'), this.value);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
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>
<canvas height="100" width="100" style="border:1px solid red"></canvas>

Jsfiddle

  • Kaduamaral I think that’s exactly what I wanted. However, there is still doubt about this, I change the size of the canvas, but how do I change the fill that in the case is done via javascript ctx.fillRect(5,5,width,height);? But Valew for help, already gave me a light.

  • I made another one Fiddle, So I think it’s just redesigning on top, it’s not changing the size, so when I put in a smaller size it doesn’t change. I’ve never worked with Canvas, so I won’t be able to help you much on this issue @Jacielplacidino. But jQuery is simple...

  • Voce really helped me, I just had doubt about replicating the input values of the fields in another site of the page. Brigadão!

  • Thanks @Jacielplacidino, we need to be here. If the answer answered your question, mark it as accepted on the left side so that the topic is closed.

1

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>

Jquery 

// 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);
});

Jsfiddle

  • Hi Gabrieloshiro... This is certainly a very good option. But I still wonder if and can pass this parameter to javascript ctx.fillRect(5,5,largura,altura);

  • @Jacielplacidino Hello, I modified it a little bit to be closer than you asked

  • I tested it and it was perfect. Thanks! @Gabrieloshiro!

  • @Jacielplacidino The best way to thank me is with a positive ;-)

  • Resuscitating the topic :D is possible to make this change and the person from another computer see this change in real time without having to refresh the page, that is, see the canvas being changed?

  • @Fox.11 That’s another question, I suggest you open a new topic for description with your code and your progress. You’ll have a better chance of getting an answer than just posting here.

Show 1 more comment

Browser other questions tagged javascript jquery html5 canvas

You are not signed in. Login or sign up in order to post.