About Scrawl.js


Scrawl.js isĀ  JavaScript library which adds an API for handling and manipulating HTML5 <canvas> elements in the DOM.

It uses the ‘2d’ context with each canvas element.

On starting, Scrawl.js investigates the HTML DOM and automatically creates controller and wrapper objects for each <canvas> element it finds.

It can also generate visible canvas elements programatically, and add them to the DOM.

Users create sprite and gradient objects using scrawl factory functions, set their styling and position, and render them onto the canvas element. Creation, positioning and styling can all be handled by a single call to the factory function.

Sprites include: basic rectangles (Block), advanced rectangles capable of displaying images and sprite animations (Picture), circles (Wheel), multi-line text (Phrase), and complex designs composed of lines, arcs and curves (Outline, Shape).

  • Factory functions can be used to easily create lines, curves and regular shapes (triangles, stars, etc).
  • JPG, PNG and SVG images (and videos – experimental) can be imported and used by Picture sprites.

Animations can be achieved by manipulating a sprite/gradient’s attributes within a user-coded animation loop.

Scrawl.js supports all canvas 2d matrix transforms (translate, rotate, etc), though moving and rotating sprites is handled directly by the sprite object itself.

All sprites – and even gradients – can be given drag-and-drop and attach-to-mouse functionality.

Scrawl sprites can be gathered into groups for easier manipulation.

Sprites can also be linked together directly (using their pivot attribute) so that positioning/moving one sprite will position/move all other sprites associated with it.

Sprites can also be animated along paths.

Scrawl.js has good support for collision detection between, and within, sprites gathered into groups. Collision fields can be generated for canvas elements to constrain sprite movements.

A visible canvas can be linked to additional (non-DOM/invisible) canvases to create complex, multi-layered displays; these additional canvases can also be manipulated for animation purposes.

Canvas rendering can be simple, or it can be broken down into clear, compile and show operations for more complex compositions.

Scrawl.js includes functionality to manipulate multiple visible canvas elements in 3 dimensions using CSS 3d transforms – where supported by the browser.

Other DOM elements – including SVG images – can be included in Scrawl stacks, and manipulated via Scrawl.js functionality.

Canvases and elements in a Scrawl.js stack (including other stacks) can be moved and scaled very easily.

Click click ...Tweet about this on TwitterShare on Google+Share on FacebookShare on TumblrShare on LinkedIn

2 thoughts on “About Scrawl.js

Leave a Reply

Your email address will not be published. Required fields are marked *