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

Two-dimensional, Renderer-agnostic Drawing API — Two.js

Two.js is a drawing API that can render using canvas, WebGL and SVG.

two.js Two dimensional, Renderer agnostic Drawing API    Two.jsTwo.js uses Underscore.js and Backbone.js for event handling. While not supporting text and images, Two.js instead focuses on the vector+shape side and altogether makes for a great tool for creating animations with shapes.

It has many methods for handling vectors, polygons and their groups.

 

Lightweight 2D Engine That Works Across Devices — Pixi.js

Pixi.js is a lightweight 2d rendering engine which supports a vast scale of devices.

pixijs Lightweight 2D Engine That Works Across Devices    Pixi.jsPixi.js allows users to employ the power of hardware acceleration without having to know WebGL.

It can currently function as a WebGL renderer and a canvas renderer; it also has an easy to use API and support for mouse and multi-touch interaction. Pixi.js also has an extensive documentation that sheds light on what the framework can do.

Track Your Users’ Head Movements — Headtrackr

Headtrackr is a JS library for real-time head and face tracking.facedetection Track Your Users Head Movements    Headtrackr

Headtrackr works as a canvas element which copies the frames from an initiated video. Once initialized, the library generates face detection events all over the place, and this is where your app intercepts them.

A demo says more than a thousand words: check out a neat little game you can play with your head!

Convert Colored Images To Greyscale — jQuery.BlackAndWhite

jQuery.BlackAndWhite is a plugin for converting colored pictures to greyscale. 

blackandwhite Convert Colored Images To Greyscale    jQuery.BlackAndWhiteYou can use the plugin inside image galleries to achieve a chic effect, as in the picture the highlighted images is in color so it stands out.

The plugin uses HTML5′s canvas tag, but includes a fallback for older browsers as well.

 

 

Visualize 3D Building Geometry On Maps — OSM Buildings

OSM Buildings is a JS library for visualizing 3D building geometry.

mappp Visualize 3D Building Geometry On Maps    OSM BuildingsOSM Buildings uses 2D Canvas operations, thus no WebGL support is required.

You’d use this type of library for visualizing cities, but it could probably be used to visualize terrain irregularities as well. Currently OSM building projects are available for Paris, Moscow, London and other cities, mostly European.

 

Use Canvas With a jQuery-like Syntax — Canvas Query

Canvas Query is a wrapper library that allows using the canvas element with a syntax akin to that of jQuery.

It also adds numerous image manipulation methods for game developers.

canvasquery Use Canvas With a jQuery like Syntax    Canvas Query

 

The main advantages to using this library are the addition of jQuery’s chaining methods and color/layering options that make creating things on the canvas element much easier.