CODEWITHSUNDEEP
javascripthtml5-canvas2d
CCC
CCC

Reputation: 2761

render on each iteration on loop in HTML5 canvas

I have a function than takes in a polar equation and plots it pixel by pixel.
The whole loop is finished then it's rendered at the end, but I don't want it to wait till the end of the loop to show the full thing, I just want to show each pixel as it's being rendered one by one.
Most solutions talk about refreshing the whole thing and rerendering the previous stuff, which seems inefficient and also kinda complicated.

Is there a function or technique that could help me accomplish that without too much complication? Maybe something like:

do {
   putPixel(x,y, color);
   renderNow();
   wait();
} while ...

Upvotes: 0

Views: 852

Answers (1)

Marko
Marko

Reputation: 124

You could use requestAnimationFrame and then draw one pixel each frame while incrementing x.

Here's a fiddle of how it would work in general:

https://jsfiddle.net/x7jyob3u/1/

And documentation for requestAnimationFrame

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Upvotes: 1

Related Questions