Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    jQuery Scroll Path

    jQuery Scroll Path

    A jQuery plugin for defining a custom path that the browser follows when scrolling.The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initating the plugin.

    Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.

    The plugin also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.

    Clipping JPEGs Freely With JavaScript : polyClip.js

    When we need to clip an irregular shape from an image and use it on the web, PNG is the most common answer as it is the only image format used by all web browsers that support alpha channels.However, PNG images come with a penalty of size (if the source is a photograph) compared to similar sized JPEGs.

    polyClip.js is a script, built on jQuery, that allows us to clip any image with imagemap coordinates using HTML5 Canvas.

    jQuery webcam plugin

    jQuery webcam plugin

    The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript.This plugin provides three different modes to access a webcam through a small API directly with JavaScript – or more precisely jQuery. Thus, it is possible to bring the image on a Canvas (callback mode), to store the image on the server (save mode) and to stream the live image of the Flash element on a Canvas (stream mode).

    Javascript CanvasLoader Creator

    Javascript CanvasLoader Creator

    This one is a small JavaScript UI library, that utilizes HTML5 Canvas element for drawing and animating circular preloaders.It can work in any ‘good’ browser that has support for HTML5 Canvas element. It has a UI to customize preloader.

    CSS3-Powered Presentation Framework : Impress.js

    CSS3-Powered Presentation Framework : Impress.js

    A new presentation framework is released recently -named Impress.js– which enables us to build very beautiful outputs.

    Slides can be by positioned, rotated and scaled on an infinite canvas with zoom in/out and 3D effects by making use of CSS3 transforms and transitions to create the awesomeness (which makes it only compatible with WebKit and the latest Firefox + IE browsers).

    And, for older browsers, Impress.js fallbacks to a standard presentation without the effects but by keeping the functionality.

    jCanvas – jQuery meets the HTML5 canvas

    jCanvas - jQuery HTML5 canvas

    jCanvas is a jQuery plugin that makes the HTML5 canvas easy to work with.

    jQuery ExCanvas World Map

    jQuery ExCanvas World Map

    Google Analytics has an excellent map of the world showing where your website visitors come from.While I can’t ever hope to compete with Google’s product, I do want to have a similar map within JAWStats which shows roughly the same sort of information. Ignoring the “clickable” nature of Google’s map at this stage (I’ll tackle that another day), dynamically drawing a map in a web browser isn’t so easy. Naturally, I thought Flash would be the answer but, never one for doing things the easy way, I wanted to try doing this directly in HTML’s <canvas> tag.

    Artisan JS a javascript Canvas Library

    Artisan JS a javascript Canvas Library

    Artisan JS is an Open Source JavaScript Canvas Library that aims to make in-browser drawing very easy.

    It specifically targets Canvas and supports for layered data, graphics can be layered and flattened when rendered, but the data remains. This means the data can continue to be manipulated after it is rendered.

    jQuery Html5 Canvas Preloader

    jQuery Html5 Canvas Preloader

    Now you can preload your HTML 5 page with this nice plug in, passing data via JSON. You can customize it changing colors and style. It can preload video, audio, images and js

    HTML5 & CSS3 Powered Slideshows – Slider.js

    HTML5 & CSS3 Powered Slideshows – Slider.js

    Slider.js is a slideshow engine built with jQuery and uses CSS3 and/or HTML canvas for the transitions.Items can have a text-caption with links and users can browse it with a pagination or using the prev-next links.Slider’s design can be completely changed as there is support for theming and interactions can be customized using the well-documented API.

    The data source is JSON and, besides the 13 available CSS transitions, there 10 built-in and good-looking canvas functions.