TypeSelect is a JavaScript-based solution for using selectable custom fonts on the web.

It combines the power of typeface.js, jQuery, the canvas, toDataURL, CSS background properties & real overlayed text to accomplish this feature.

TypeSelect is very easy to understand & implement. It is totally controlled via CSS & no server-side files are required.

It has support for double/triple-click selections, UTF-8 characters & gracefully degrades in IE6.

On the other hand, currently, it has some limitations like unselectable text in IE, not being able to use :hover or line breaks & few more.

Protovis is a JavaScript library for visualizing data using the canvas element.

Custom views of data can be composed with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position.

Although Protovis looks complicated, it is very easy to understand (specially for JavaScript users) & has a straight forward logic which offers a flexible way to create any type of visualizations.

To see more, you can check the API documentation (very well-documented) & examples built with it.

Pixastic is an open source JavaScript image processing library.

It uses HTML5 Canvas element that enables accessing to raw pixel data.

Supported effects are:

• desaturation/greyscale
• invert
• flipping
• brightness/contrast adjustment
• hue/saturation
• emboss
• blur & more

There is an image editor built with it & the library is well-documented.

This is another Coverflow script which uses canvas for the effects.

The script is very easy to implement & works smoothly.

Images can be browsed via scroll wheel or left-right keys besides the mouse clicks. And, it is tested with other javascript libraries like jQuery, MooTools, Dojo and Prototype.

For the canvas support in IE, checkout ExplorerCanvas.

Raphaël is a JavaScript library that facilitates using & creating vector graphics in websites.

It uses SVG & VML for creating graphics. As every graphic generated is a DOM object, you can manipulate them via JavaScript.

This graphics JavaScript library is very ideal for creating charts, images effects like rotation or reflection.

An example:

Creating graphics is much easier with Raphaël compared to writing everything from scratch as a circle can be created with:

paper.circle(320, 240, 50).attr({fill: "#223fa3", stroke: "#223fa3", "stroke-width": 3, "fill-opacity": 0.5});

The library currently works in all major browsers except Firefox 2 & it is still under development.

ProtoChart is an open source canvas chart library built with Prototype.

This library is highly inspired from Flot, Flotr and PlotKit & it enables us to create different chart types on the fly.

Features of this chart library:

• Line, bar, pie, curve, mix, and area charts available
• Multiple data series on same graph
• Highly customizable legend support
• Customizable grid, grid border, background
• Customizable axis-tick values (both x and y)
• Supports: IE6/7, FF2/3 and Safari
• Even works on an iPhone!

As IE6 does not support the canvas tag, Excanvas library is used for compatibility.

JavaScript Image Effects is a library that you can instantly create effects like rotate, blur, emboss & more.

Using such a library is very functional in situations where you may need to add an effect to lots of images, need to provide an interface to the users for creating effects & so.

How to use?

After inserting the imagefx.js file into your webpage, you have 2 options:

<script type="text/javascript" >
jsImageFX.doImage(document.getElementById("myimage"), "blur");
</script>

or

<img src="image.jpg" imagefx="blur" /> 

where both are very easy to apply.

Every image effect is not available in every browser and a comprehensive browser compatibility chart can be found in the website

BgPatterns is a pattern library where you can find, create & share patterns.

You can create the patterns from ready-to-use images by changing the colors & canvas and scaling or rotating them. And this process is done with a slick interface.

The pattern design interface lets you preview them easily.

And, you can also check the recently created and popular patterns.

In general, gauges are built with Flash as they require an animation.

Rather than Flash gauges, this is a pure JavaScript & canvas gauge.

How it works?

The code sets a starting and an end value. Using the HTML Canvas element, it draws the needle and simply rotates it according to the current data. For more information about Canvas element, check this WRD post.

As Internet Explorer does not support Canvas element natively, this Canvas gauge uses IECanvas for that.

Working demo can be found here.

Tip:

There is also a dynamic Flash gauge at the same page.

fgCharting is a jQuery plugin which helps us to create accessible charts from standard table data with canvas.

Using this chart plugin, we can create several types of graphs, such as pie, line, area, and bar.

As canvas is not supported by default in Intenet Explorer, you can use ExplorerCanvas to add this functionality to it (WRD post for more details).