Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    Paper.js : Swiss Army Knife of Vector Graphics Scripting

    Paper.js : Swiss Army Knife of Vector Graphics Scripting

    Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

    Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users.

    Sketch : Draw squiggly sketches in 3D with Hmtl5 & JavaScript

    Sketch : Draw squiggly sketches in 3D with Hmtl5 & JavaScript

    Sketch is a drawing tool with a twist; it allows you to draw in pseudo 3D. Sketches can be saved by users and viewed in a gallery.

    The front end is built using the HTML5 canvas element and plenty of JavaScript. Sketches are saved in a MySQL database and PHP is used as a mediator between front end and database.

    Pure HTML5 Charts by jqChart for jQuery

    Pure HTML5 Charts by jqChart for jQuery

    jqChart takes advantages of HTML5 Canvas to deliver high performance client-side charts and graphs across browsers (IE 6+, Firefox, Chrome, Opera, Safari) and devices, including iOS and Android mobile devices. Full Touch support.

    Features:

    • High performance. Uses pure HTML5 Canvas rendering
    • Cross-browser support – tested with IE 6+, Firefox, Chrome, Opera, Safari
    • Supports iOS and Android mobile devices
    • Full Touch Support
    • Bar, Column, Pie, Line, Spline, Area, Scatter, Bubble, Radar, Polar Charts
    • Stock and Candlestick Financial Charts
    • Real-Time Charts
    • Scrolling/Zooming
    • Animations

    Fokus : Emphasized text-highlighting using JavaScript

    Fokus : Emphasized text-highlighting using JavaScript

    Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.

    The library has no dependencies and weighs in at around 3kb. A <canvas> element is used to paint the cut-out cover. Works in most modern browsers except IE and touch devices.

    jQuery.fluxoModal : jQuery plugin similar to Lightbox

    jQuery.fluxoModal : jQuery plugin similar to Lightbox

    jQuery.fluxoModal is a jQuery plug-in similar to lightbox. It can highlight any kind of html element inside an html modal window, blurring the background using html5 canvas, CSS3 animations and a crossbrowser fallback for IE.

    jQuery Cute Slider – 3D & 2D HTML5 Image Slider

    jQuery Cute Slider - 3D & 2D HTML5 Image Slider

    Tired of boring flat sliders? Looking for a unique slider? Here’s what you want,with Cute Slider you will be able to show your slides with awesome 3D & 2D transitions.Cute Slider makes your ideas alive, It gives you desire,you can use it as an advanced 2D slider with tons of 2D transitions, or add third dimention to your slider and create a unique and inpressive 3D slider.

    Features :

    • 3D & 2D effects
    • 100+ prest transitions
    • 3 fallback levels(CSS3D, Canvas, 2D)
    • Cross Browser
    • Device friendly
    • Youtuve and Vimeo videos
    • Search engine optimized

    jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML

    jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML

    jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML on IE 8 and jQuery.jsPlumb adds an element to the DOM for each Endpoint, Connector and Overlay. So for a connection having visible Endpoints at each end and a label in the middle, jsPlumb adds four elements to the DOM. The actual elements it adds depend on the renderer in use (Canvas/SVG/VML).

    Gauge.js : 100% native and cool looking animated JavaScript gauge

    Gauge.js : 100% native and cool looking animated JavaScript gauge

    100% native and cool looking animated JavaScript/CoffeScript gauge

    • No images, no external CSS – pure canvas
    • No dependencies
    • Highly configurable
    • Resolution independent
    • Animated guage value changes
    • Works in all major browsers

    Easy Pie Chart : jQuery animate nice pie charts with HTML5 canvas element

    jQuery animate nice pie charts plugin with HTML5 canvas element

    Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These chars are highly customizable and very easy to implement.To use the easy pie chart plugin you need to load the current version of jQuery (testet with 1.7.2) and the source (css+js) of the plugin.

    jPageFlipper : jQuery HTML5 Canvas page flipper

    jPageFlipper : jQuery HTML5 Canvas page flipper

    This is a wonderful implementation of page flipper entirely based on HTML 5 <canvas> tag. It means that it can work in any browser that supports HTML 5 standard draft – just out of the box!