How do I make html5 animation smooth?

Question

I am using canvas and webkitrequestAnimation frame for my animation.. However, the animation is instant and not smooth.. It is so fast, i cant see any animation.. How do i make the animation smooth ?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wave 2</title>

</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>

<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
angle = 0,
range = 50,
centerY = canvas.height / 2,
xspeed = 1,
yspeed = 0.05,
xpos = 0,
ypos = centerY;
context.lineWidth = 2;
(function drawFrame () {
window.webkitrequestAnimationFrame(drawFrame, canvas);

context.beginPath();
context.moveTo(xpos, ypos);
//Calculate the new position.
xpos += xspeed;
angle += yspeed;
ypos = centerY + Math.sin(angle) * range;
context.lineTo(xpos, ypos);
context.stroke();
}());
};
</script>
</body>
</html>

Community · Accepted Answer · 2017-05-23 12:20:18Z

1

That works as expected for me apart from a syntax error on line 24:

window.webkitrequestAnimationFrame(drawFrame, canvas);

window.webkitRequestAnimationFrame(drawFrame, canvas);

Check out the answer on this page: How to use requestAnimationFrame

It will guide you in writing a request animation function that works across all compatible web browsers not just those built on webkit. If you were using a browser other than Safari or Chrome that might explain any erratic behaviour.

I would like to advocate createjs.com here because they provide great API for working with the HTML5 canvas and animation. Check out the demo's and source!

edited May 23, 2017 at 12:20

CommunityBot

11 silver badge

answered May 27, 2012 at 7:03

LoneWolf

1761 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I make html5 animation smooth?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related