CAN'T get screen tearing when updating canvas from setTimeout

Question

I found this old question and couldn't reproduce the described problem Html canvas 1600x1200 screen tearing. It makes sense that updating canvas from setTimeout callback should produce screen tearing. But even though flickering is very apparent no tearing seems to happen. Here is a small demo: codepen
I can't see any tearing in Chrome and Safari. Surely browsers don't do VSync with setTimeout. So what's happening here?
I added a delay to the canvas update, so it should be more probable for buffer swap to occur in the middle of the update, but no luck here.

const STRIPE_WIDTH = 50;
const STEP = 4;

let canvas = document.createElement('canvas');
canvas.style.width = '100%';
canvas.style.height = '100%';
document.body.appendChild(canvas);
let ctx = canvas.getContext('2d');

let pos = 0;

function render(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let width = Math.ceil(canvas.width/STRIPE_WIDTH) * STRIPE_WIDTH;
    ctx.fillStyle = 'black';
    for(i = pos; i < width; i+=STRIPE_WIDTH){
        for(j = 0; j < canvas.height; j++){
            ctx.fillRect(i, j, STRIPE_WIDTH/2, 1);
        }
    }
    for(i = pos; i > 0; i-=STRIPE_WIDTH){
        for(j = 0; j < canvas.height; j++){
            ctx.fillRect(i - STRIPE_WIDTH, j, STRIPE_WIDTH/2, 1);
        }
    }
    pos = pos + STEP;
    setTimeout(render, 1000/60);
}

render();

Answer 1

Yes, the canvas rendering is still tied to the document's rendering, itself in sync with the monitor's v-sync, so you should not see any tearing.

You can disable this by setting the desynchronized attribute of the context to true.

const low_latency_ctx = canvas.getContext("2d", { desynchronized: true });

However this is currently only supported by Chrome on ChromeOS and Windows. Since I don't have such a configuration at hand I unfortunately can't write a demo myself...