Add responsive, integrated and interactive HTML5 canvas elements to your website today.

Hello world demo panel

Hello World!

Move cursor over, or touch, panel to animate caption.

Scrawl-canvas is an extendable JavaScript library designed to make using the HTML5 <canvas> element a bit easier, and a bit more fun.

Gradient spotlight demo panel

Interactive animations

Move cursor, or drag finger, over panel to reposition spotlight.

Let your designers run wild! Many graphical effects can be made interactive using scrawl-canvas, for instance this gradient-based spotlight effect.

Greyscale filter demo panel

Composite with layers and filters

Drag button left or right over panel to reposition filter.

Scrawl-canvas includes a range of filters that are easy to code, tweak and use.

Sprite image demo panel

Add some sprite

Move cursor, or drag finger, left or right over panel to animate sprite.

Animated sprites can be easily added to any scene, with a sophisticated range of positioning, playback and collision detection functionalities.

Freehand drawing demo panel

Drawing made easy

Move cursor, or drag finger, over panel to draw line.

Who needs brushes? The only limit to scrawling on a canvas is your imagination!

Timeline graphic demo panel

Easy-to-use timelines

Scroll or drag over panel to progress timeline.

Scrawl-canvas comes with an expressive set of tween and timeline functionalities.

3d cube demo panel

Many canvases

Move cursor, or drag finger, over panel to rotate cube.

The scrawl-canvas animation engine makes controlling multiple <canvas> elements both simple and efficient.

Image select lightbox demo panel

Smash the envelope!

Click or tap on image to enlarge/reduce it.

Bored of blocks? Scrawl-canvas includes a range of ways to help you move beyond the expected.

Chroma key video demo panel

The personal touch

Scrawl-canvas allows the <canvas> element to become an integral part of the web page - how about personalizing some videos for your users?

Physics-driven snow demo panel

The real touch

Move cursor over, or touch, panel to animate snow.

The scrawl-canvas physics engine can add that extra dimension to help engage visitors and users.

Magnifier infographic demo panel

Embrace responsive

Move cursor, or drag finger, over panel to reposition magnifier.

Making a <canvas> element both responsive and interactive is one of today's great coding challenges. Scrawl-canvas is here to help you achieve your vision across browsers and devices.

Your idea here?

If you have an idea for a canvas demo, let me know. The greater the challenge, the better!

Scrawl-canvas - version 5.0.4

Last updated: 14 February 2016

Please report bugs and ask questions at the Scrawl-canvas page on GitHub.