The act of converting content from its original format into a format capable of being displayed on the web
Manage Multiple WordPress Sites

Canvas

Canvas Category

Algorithmic Sunburst Generation With CSS, Canvas, jQuery — pow.js

pow.js is an impressive demonstration of use of the canvas element.

powjs Algorithmic Sunburst Generation With CSS, Canvas, jQuery    pow.js

pow.js paints a sunburst pattern depending on the values you provide: the origin element of the ray (#foo in this case), the starting color and the end color, etc.

Besides using the generated images for a background, pow.js is useful as a code example of operating with the canvas element.

A Lightweight JavaScript Graph Drawing Library – Sigma.js

Sigma.js is a lightweight JavaScript library for drawing highly functional graphs on HTML5′s canvas.

sigmajs A Lightweight JavaScript Graph Drawing Library   Sigma.js

The library can import some specific graph formats, like those produced by Gephi, and features a number of useful functions:

  • jQuery-like event management system;
  • A public API;
  • Methods for complete customization;
  • Chainable methods;
  • etc.

Sigma is a rather interesting library, and, it seems, has already gathered quite a following (for a new project, that is) with 147 watchers on GitHub.

 

Create a Drawing App with HTML5′s Canvas

William Malone has released a breathtaking tutorial on how to create an HTML5 canvas drawing app.

canvas Create a Drawing App with HTML5s CanvasThe end result is an awesome-looking canvas, with markers and crayons and an eraser available.

But what’s it to you?

First of all, this tutorial can help creating “paint it yourself” features for clothing shops; and, second of all, this is an awesome way to add additional interactivity for, e.g., games or web apps.

Processing.js iPhone Port – iProcessing

iProcessing is an open-source framework that’s a port of the awesome Processing.js we covered earlier.

iProcess Processing.js iPhone Port   iProcessing
Processing is a visual processing language, and it’s really a port of Java’s Processing. And iProcessing is a port of that, effectively making iProcessing a port of a port.

iProcessing offers a way of not only putting drawing shapes and vectors, but transforming them with native methods in iOS devices.

The library is awesome for smaller applications which require working with shapes rather than images.

Instantly Create Your Customized Canvas Preloader – CanvasLoader

CanvasLoader is a web application/UI library for creating canvas preloaders.

canvasloader Instantly Create Your Customized Canvas Preloader   CanvasLoaderCanvasLoader uses HTML5′s canvas element to create awesome spinner preloaders you can later download in .html format.

Of course, canvas animations have a serious drawback — they are only supported if the browser is somewhat up to date.

However, the library does save quite a lot of space for mobile projects.

Chain the Canvas API – Chainvas

Chainvas is a JavaScript library for making the Canvas API chain-able, just like the jQuery and MooTools APIs are.

chainvas Chain the Canvas API   Chainvas The library weighs just 1kb, and it can be used to make other APIs chainable.

There are some extra helper methods included by the author, for example, circle and rounded rectangle drawing.