Problem with drawing Canvas using for loop in JavaScript

Question

I am unable to draw rectangles in canvas within for loop in JavaScript. Sometimes they are visible for a fraction of second, but they disappear instantly. No errors in developer console - tested on Firefox & Chrome, so problem isn't browser-related. Seems like only I encountered this issue within my class, despite having exactly the same (or slightly adjusted to my needs) code.

Code was tested on multiple browsers, the problem itself seems to occur only on my laptop/browser - rest of my colleagues haven't encountered this issue, apart from some typos etc.

The general idea is to receive a result similar to this one:

function Draw() {
    var l = liczba.value; // user-input based loop control
    var xpos = ypos = 300; // Left side rectangles starting drawing position
    var xneg = 600, yneg = 300; // Right side rectangles starting drawing position
    var canvas = document.getElementById('image');
    var context = canvas.getContext('2d');
    context.fillStyle = 'red';
    for(var i = 0; i < l; i++) {
        context.fillRect(xpos, ypos, 100, 100);
        context.strokeRect(xpos, ypos, 100, 100);
        console.log("Left Canvas Painted!"); // Debug

        context.fillRect(xneg, yneg, 100, 100);
        context.strokeRect(xneg, yneg, 100, 100);
        console.log("Right Canvas Painted!"); // Debug
        xpos += 50; xneg -= 50; ypos += 50; yneg += 50; // change next canvas' starting position by...
    }
}

<body>
        <form method="post" id="f" onsubmit="Draw();">
            <label>Podaj liczbę figur do narysowania: </label>
            <input type="text" name="liczba" id="liczba">
        <input type="submit" name="send" id="send" value="Zatwierdź">
    </form>
    <canvas id="image" width="1200" height="800">Canvasy nie działają</canvas>
</body>

Try to draw when the DOM is ready, google it. Don't understand your HTML comments:  — Codebeat
– Codebeat, Commented Apr 5, 2019 at 22:16
Why are you drawing the rectangles onsubmit? Submitting the form will cause it to post the data and reload. — jcbdrn
– jcbdrn, Commented Apr 5, 2019 at 22:21
@jcbdrn that's what I was worrying about. thanks for the heads up. — TheInvisibleMan
– TheInvisibleMan, Commented Apr 5, 2019 at 22:21

jcbdrn · Accepted Answer · 2019-04-05 22:24:51Z

1

Try changing the button from a submit button to a normal button and call Draw() on a click event.

<input type="button" onclick="Draw()" name="send" id="send" value="Zatwierdź">

answered Apr 5, 2019 at 22:24

jcbdrn

1,1357 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheInvisibleMan · Accepted Answer · 2019-04-05 22:25:47Z

0

The answer to this issue was pretty straight-forward, thanks to @jcbbdrn - a minor oversight on my part. Due to page reload on form submitting, whole canvas was flushed down the toilet. After implementing a regular button and assigning to it an onclick event, the problem has been solved.

answered Apr 5, 2019 at 22:25

TheInvisibleMan

561 silver badge12 bronze badges

Collectives™ on Stack Overflow

Problem with drawing Canvas using for loop in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related