requestAnimFrame + setDimensions = Flickering on selection background color

[flexeo]

Version

3.6.1

Test Case

https://jsfiddle.net/badabou/qxdnb0t4/6/

Information about environment

Chrome 79

Steps to reproduce

<canvas id="canvas" width="500" height="500" style="border:1px solid #ccc"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.setBackgroundColor('#ffffff');
canvas.setDimensions({ width: 200,	height:  200 }); // This line creates the flicker
canvas.renderAll();

fabric.util.requestAnimFrame(function requestAnimFrameRender() {
	canvas.requestRenderAll();
	fabric.util.requestAnimFrame(requestAnimFrameRender);
});
</script>

[asturur]

I m not sure where the flickering is.
requestRenderAll is going to set the render in the next frame, exactly as requestAnimationFrame is doing, inside a requestAnimationFrame you can safely use renderAll(), having it schedule a render on the next frame again, will probably make you render every 2 frame.

I can't see the flicker at all.

[asturur]

Can you try to describe the issue in a way i can replicate it?

[flexeo]

Here's a screen video of what's going on with the selection:
https://i.postimg.cc/k4dkyL78/ezgif-5-6f1cd80380ba.gif

I have this problem on Chrome + Firefox.

[asturur]

you understand the communication problem is that the only english written text is the short title? Adding a more exhaustive description from the start would have been better.

[HATyCEHKA]

I have the same problem.
Selection frame became not transparent when stop mouse moving and do not release mouse button

[asturur]

yes is a bug and need a workaround. Continuos render cycle are not supported but i do not see why they should not work.

[yassilah]

Actually i think it makes sense, it's just because on renderAll, only the containerContext is being cleared. By adding a canvas.clearContext(canvas.getSelectionContext()), this fixes the issue:

https://jsfiddle.net/gyqztLx4/

[hamzawain7]

Still happening, can you please bump up the priority.

[kirill-konshin]

@ShaMan123 @asturur we're also seeing this issue, pls raise priority and/or help to hotfix.

[ShaMan123]

You can see it happens with free drawing as well.
https://jsfiddle.net/9g4yo8zk/12/

Here it's fixed:
https://jsfiddle.net/9g4yo8zk/24/

PRing in a moment