Sketches which have a low framerate defined and resize the canvas when the window id resized, show some flickering behaviour.
Here is an example:
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script type="module">
import u5 from "https://www.unpkg.com/u5js@0.4.2/index.js";
const example = (sketch) => {
sketch.setup = function () {
sketch.createCanvas(sketch.windowWidth, sketch.windowHeight);
sketch.frameRate(25);
};
sketch.draw = function () {
sketch.background("white");
sketch.fill("black");
sketch.noStroke();
const d = Math.min(sketch.width, sketch.height) / 2;
sketch.ellipse(sketch.width / 2, sketch.height / 2, d, d);
};
sketch.windowResized = () => {
sketch.resizeCanvas(sketch.windowWidth, sketch.windowHeight);
};
};
new u5(example, document.getElementById("container"));
</script>
</body>
</html>
Actual result: Canvas flickers when resized
Expected result: Canvas should not flicker when resized
Sketches which have a low framerate defined and resize the canvas when the window id resized, show some flickering behaviour.
Here is an example:
Actual result: Canvas flickers when resized
Expected result: Canvas should not flicker when resized