How to avoid HTML Canvas auto-stretching

Question

I have the following piece of HTML:

&l         


        

Answer 1

I found it easier to just put a while loop waiting for timeout within my animation loop, For example:

function animate() {
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    ryuji.draw();
    ryuji.update();
    let now = Date.now();
    then = now + (1000 / fps);
    while (Date.now() < then) {

    }
    requestAnimationFrame(animate);
}