CY5 CY5 - 4 years ago 107
Javascript Question

Output is Rendered differently when using( forloop vs setInterval,requestAnimationFrame)

I'm facing problem with ForLoop vs (setInterval,requestAnimationFrame)
The Code below simply draws random rectangle on canvas.

I'm avoiding to make this question large by Copy/pasting the whole code here, instead i'll post relevant code with a Demo

The issue is when i use
1. For loop to draw 50 Rectangle i get All 50 Rectangle on screen as shown below, but instead of forloop
2.if i use setInterval or requestAnimation(callback) i get Single rectangle.
In second case Whenever a new Rectangle is drawn previously drawn rectangle is Clear so final o/p i get as single Rectangle but this is not happening if i use a forloop Why so?

I have tested my case with


ForLoop,setInterval and requestAnimationFrame


using For loop:
My Code Flow goes this way and a Demo:

function main() {
.....
drawRects();
}
function drawRects() {
for(var i=0;i<50;i++){
setRectangle(gl, randomInt(100), randomInt(100),randomInt(100), randomInt(100));
//draw Rectangle
....
}}
main();


and i get Output as:
Output using a For loop

using requestAnimationFrame/ similary with setInterval:

My Code Flow goes this way and a Demo:

function main() {
.....
render();
}
function render(){
if(rectCount < 50){
drawRects();
rectCount++;
}
window.requestAnimationFrame(render);
}
function drawRects() {
setRectangle(gl, randomInt(100), randomInt(100),randomInt(100), randomInt(100));
//draw Rectangle
....
}
main();


Output using requestANimation

Answer Source

This is because WebGL clears the canvas after it composites

If you don't want WebGL to clear the canvas after compositing you can pass in preserveDrawingBuffer: true when creating the context

var gl = someCanvas.getContext("webgl", { preserveDrawingBuffer: true });

at the possible expense of some perf.

Some other Q&As that have more details

http://stackoverflow.com/a/33331594/128511

http://stackoverflow.com/a/26790802/128511

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download