Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    An HTML5 Slideshow w/ Canvas & jQuery

    An HTML5 Slideshow w/ Canvas & jQuery

    You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

    All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

    With JavaScript, we are going to apply a special filter to every image in the slideshow. We will create a new version of the images, with higher contrast and more vivid colors, and store it in a canvas elements.

    wScratchPad : HTML5 jQuery Scratch Pad Plugin

    wScratchPad : HTML5 jQuery Scratch Pad Plugin

    The Websanova Scratch Pad is a unique one of a kind plugin that allows you to add a scratching effect to images something similar to scratching a lottery ticket. It is written using canvas so you would need an HTML5 compliant browser to use it but it does support a fallback to display a message to upgrade to a newer browser if the browser does not have canvas support. What’s really cool is that it keeps track of the percentage of area scratched so that you can trigger a callback once a user scratches a certain amount of the surface area.

    EaselJS : JavaScript Library to makes work with HTML5 Canvas element easy

    EaselJS : JavaScript Library to makes work with HTML5 Canvas element easy

    EaselJS is a library to make working with the Canvas element easier. It provides a display list to allow you to work with display elements on a canvas as nested objects. It also provides a simple framework for providing shape based mouse interactions on elements in the display list. This is useful for games, generative art, and other highly graphical experiences.

    EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. It provides an API that is familiar to Flash developers, but embraces Javascript sensibilities. It consists of a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

    SeuratJS : Raphaël plugin for beautiful pointillized Animations

    SeuratJS : Raphaël plugin for beautiful pointillized Animations

    SeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an image of your choice and rebuilding the original with filled graphical primitives in SVG. Seurat makes it extremely easy to alter what primitives are generated (how they look and where they appear) and how they animate.

    SeuratJS uses the HTML5 canvas to parse color data and, because of this, the library operates entirely on the client side.

    dygraphs JavaScript Visualization Library

    dygraphs JavaScript Visualization Library

    dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.

    Features

    • Plots time series without using an external server or Flash
    • Works in Internet Explorer (using excanvas)
    • Lightweight (45kb) and responsive
    • Displays values on mouseover (this makes it easily discoverable)
    • Supports error bands around data series
    • Interactive zoom
    • Adjustable averaging period
    • Can intelligently chart fractions
    • Customizable click-through actions
    • Compatible with the Google Visualization API
    • Intelligent defaults make it easy to use

    jSignature : jQuery plugin for draw signature in browser

    jSignature : jQuery plugin for draw signature in browser

    jSignature is a jQuery plugin which simplifies creation of a signature capture field in the browser window, allowing a user to draw a signature using mouse, pen, or finger.

    jSignature captures signature as vector outlines of the strokes. Although jSignature can export great bitmap (PNG) too, extraction of highly scalable stroke movement coordinates (aka vector image) of the signature allows much greater flexibility of signature rendering.

    A extra effort (through smoothing and pressure simulation) is made to make the strokes look pretty on the screen while these are drawn by the signor.All major desktop, tablet and phone browsers are supported. HTML5 Canvas element is used by default. We fall back on Flash-based Canvas element emulator (FlashCanvas) when actual Canvas is not supported by the browser (Iinternet Explorer v.8 and lower).

    jQuery Animated Percentage Loader

    jQuery Animated Percentage Loader

    jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. The plugin takes miniminal installation and is simple and flexibile to use. It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional). It uses vectors rather than images so can be easily deployed at various sizes by simply adjusting the initial parameters.

    A jQuery plugin that utilises HTML canvas to show an animated percentage loader widget suitable for loading screens or displaying feedback during long-running tasks.

    Make a snake game using HTML5 canvas and jQuery

    Make a snake game using HTML5 canvas and jQuery
    Learn to make a simple snake game using HTML5 canvas and Jquery.

    Pixastic: JavaScript Image Processing Library

    Pixastic: JavaScript Image Processing Library

    Pixastic is an image processing library written in JavaScript. It uses the HTML5 Canvas element to apply effects such as blur, hue/saturation adjustment, emboss, invert, flip, etc.Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more.

    Presenteer.js : jQuery HTML5 Presentation Tool

    Presenteer.js : jQuery HTML5 Presentation Tool

    Presenteer.js is a flexible HTML5 presentation tool that uses CSS3 transforms and transitions to make smooth HTML presentations.Works on Chrome, Firefox, Opera, Android, iPhone and IE9.It uses canvas, where canvas is a selector or jQuery element of the canvas on which the presentation is placed. It is this canvas that will be repositioned with CSS3 transform to slide a certain element into view.