Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    jQuery Kontrol

    jQuery Kontrol

    Experimental JavaScript jQuery library of UI controls ; dial (was jQuery Knob), XY pad, bars.

    Library of UI controls ; dial (was ‘knob’), XY pad, bars control …

    • canvas based ; no png or jpg sprites.
    • touch, mousewheel, keyboard events implemented.
    • downward compatible ; overloads inputs.

    jQuery Extract the main Colour of an Image’s borders : Image-pixel-border

    jQuery Extract the main Colour of an Image's borders : Image-pixel-border

    A very lightweight and simple jQuery plugin to extract the main color of an image’s border. Just pass a callback as first parameter of the getPixelColor which takes one parameter. The parameter send to your callback will be the hexadecimal color code.

    In few words:

    1. Clone the image in a dynamically created HTML canvas element.
    2. Read the pixels of the TOP, BOTTOM, LEFT, RIGHT borders of the image
    3. Extract the most frequent color
    4. Return the extracted color to your callback

    Signature Pad : jQuery plugin Records the Drawn Signature for later regeneration

    Signature Pad : jQuery plugin Records the Drawn Signature for later regeneration

    A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration.

    Demos :

    Squiggle : Scribble out your content with jQuery Plugin

    Squiggle : Scribble out your content with jQuery Plugin

    This jQuery plugin will generate a HTML5 Canvas made png to draw a ‘squiggle’ over your text, like a strike-through or underline.You can configure the plugin, with scribble thickness; colour; intensity or leave it in its auto state, which will callibrate itself to match your text’s CSS.

    rasterizeHTML.js : Renders HTML into the browser’s canvas

    rasterizeHTML.js : Renders HTML into the browser's canvas

    Draw a page/an HTML string/a Document to the canvas.For security reasons rendering HTML into a canvas is severly limited. Firefox offers such a function via ctx.drawWindow(), but only with Chrome privileges.

    To cope with the existing limitations, rasterizeHTML.js will load external images, fonts and stylesheets and store them inline via data: URIs or inline style elements respectively.

    Pixi.js : Super fast HTML 5 2D rendering engine

    Pixi.js : Super fast HTML 5 2D rendering engine

    Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback.The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. Also its fast.

    Features:

    • WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
    • Canvas renderer (Fastest in town!)
    • Full scene graph
    • Super easy to use API (similar to the flash display list API)
    • Support for texture atlases
    • Asset loader / sprite sheet loader
    • Auto-detect which renderer should be used
    • Full Mouse and Multi-touch Interaction
    • Text
    • BitmapFont text
    • Multiline Text
    • Render Texture
    • Spine support
    • Primitive Drawing
    • Masking

    Patternizer.js : Canvas script to Generate Stripe Patterns

    Patternizer.js : Canvas script to Generate Stripe Patterns

    Patternizer.js is a canvas script to generate stripe patterns.Patternizer.js adds a patternizer() method to canvas elements. It can receive one parameter, which is an options object. In that you can specify a stripes array, and a background color.

    three.js : JavaScript 3D library

    three.js : JavaScript 3D library

    The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.

    jQuery.qrcode : Generate QR codes dynamically

    jQuery.qrcode : Generate QR codes dynamically

    jQuery.qrcode enables you to dynamically add QR codes to your website. Choose between rendering the code in a canvas or with divs. The latter will be fine even for older browser. The generated QR code will be in the least possible version requiered to encode the content (least number of blocks).

    Relocator.js : jQuery plugin to create Photo Gallery

    Relocator.js : jQuery plugin to create Photo Gallery

    Relocator is lightweight jQuery plugin to create photo gallery. this plugin will make the different size images to fit with the specified canvas without “size resizing”.

    Features:

    • Plugin will resize the image and fit within the given canvas without “size resizing”
    • Also provide extra feature like show the title and animate the image description on mouse hover.