Tutorial by Examples | RIP Tutorial

Simple animation with 2D context and requestAnimationFrame

This example will show you how to create a simple animation using the canvas and the 2D context. It is assumed you know how to create and add a canvas to the DOM and obtain the context // this example assumes ctx and canvas have been created const textToDisplay = "This is an example that uses...

html5-canvas • Animation

Animate at a specified interval (add a new rectangle every 1 second)

This example adds a new rectangle to the canvas every 1 second (== a 1 second interval) Annotated Code: <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(functio...

html5-canvas • Animation

Animate at a specified time (an animated clock)

This example animates a clock showing the seconds as a filled wedge Annotated Code: <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid red; } </style> <script> window.onload=(function(){ // canva...

html5-canvas • Animation

Use requestAnimationFrame() NOT setInterval() for animation loops

requestAnimationFrame is similar to setInterval, it but has these important improvements: The animation code is synchronized with display refreshes for efficiency The clear + redraw code is scheduled, but not immediately executed. The browser will execute the clear + redraw code only when the d...

html5-canvas • Animation

Animate an image across the Canvas

This example loads and animates and image across the Canvas Important Hint! Make sure you give your image time to fully load by using image.onload. Annotated Code <!doctype html> <html> <head> <style> body{ background-color:white; } #canvas{border:1px solid re...

html5-canvas • Animation

Don't draw animations in your event handlers (a simple sketch app)

During mousemove you get flooded with 30 mouse events per second. You might not be able to redraw your drawings at 30 times per second. Even if you can, you're probably wasting computing power by drawing when the browser is not ready to draw (wasted == across display refresh cycles). Therefore it m...

html5-canvas • Animation

Easing using Robert Penners equations

An easing causes some variable to change unevenly over a duration. "variable" must be able to be expressed as a number, and can represent a remarkable variety of things: an X-coordinate, a rectangle's width, an angle of rotation, the red component of an R,G,B color. anything that c...

html5-canvas • Animation

Set frame rate using requestAnimationFrame

Using requestAnimationFrame may on some systems update at more frames per second than the 60fps. 60fps is the default rate if the rendering can keep up. Some systems will run at 120fps maybe more. If you use the following method you should only use frame rates that are integer divisions of 60 so th...

html5-canvas • Animation

Animate from [x0,y0] to [x1,y1]

Use vectors to calculate incremental [x,y] from [startX,startY] to [endX,endY] // dx is the total distance to move in the X direction var dx = endX - startX; // dy is the total distance to move in the Y direction var dy = endY - startY; // use a pct (percentage) to travel the total distance...

html5-canvas • Animation