CODEWITHSUNDEEP
javascriptcanvas
KadEyy
KadEyy

Reputation: 3

RequestAnimationFrame doesn't work in simple canvas

Here is simple code. Arc works for sure but when I try to put requestAnimationFrame in function whole function just doesn't work.

I did nothing because I am doing it from Chris Courses canvas course. Exactly same code as his.

            var canvas = document.querySelector('canvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var ctx = canvas.getContext('2d');

            var x = 200;
            function animate(){
            requestAnimationFrame(animate);
            ctx.beginPath();
            ctx.arc(x, 200, 30, 0, Math.PI * 2, false);
            ctx.strokeStyle = 'blue';
            ctx.stroke();
            console.log('F');
            x =+ 1;
            }

<html>
    <head>
        <meta charset="utf-8"/>
        <style>
            *{
                padding:0;
                margin:0;
            }
            body{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <canvas>

        </canvas>
        <script src="canvas.js"></script>
    </body>
</html>

Upvotes: 0

Views: 258

Answers (1)

Get Off My Lawn
Get Off My Lawn

Reputation: 36351

You need to call the animate function at least once outside of the function to initialize the start of it. This can be another requestAnimationFrame(animate), animate(), or a self invoking function.

function animate(){
  // The function body
  requestAnimationFrame(animate);
}

animate();

Upvotes: 2

Related Questions