HTML5 Canvas Animation Playground - Create animations in real-time

Settings

Theme

Bright

Dark

Font size

A+

A-

A^ø

Options

Gutter

Word wrap

Log window

Shortcuts

ALT + MToggle menu bar ALT + TToggle theme ALT + IIncrease font size ALT + ODecrease font size ALT + 0Reset font size ALT + GToggle gutter ALT + WToggle word wrap ALT + LToggle log window

Load

Example 1

Example 2

Reset

Code

Settings

Export animation

?

The Canvas Animation Playground is an experimental tool for creating HTML5 canvas animations. Just type in JavaScript code and it will be interpreted for the <canvas> box on the right side. The function "CanvasAnimationLoop()" gets called on every browser frame via "requestAnimationFrame". Animations can be exported as stand-alone HTML files.

There are some global objects and functions you may want to use:

CVS = <canvas> element itself
CTX = canvas.getContext("2d")
LOG(message) = send message to log window
CLEARLOG() = clears log window

Click on the gutter to fold an object or a function in and out.

The tool makes use of HTML5's localStorage and has been optimized for modern browsers. Internet Explorer is supported from version 9 on.

The project was developed by Matthias Schuetz and is available on GitHub. It's based on HTMLiveCode, a real-time code editor.

Use this path to point to local image files (works for 'src' attribute of images and CSS 'background-image' urls)

Move your cursor over the menu button to show the menu bar.