Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    jCanvaScript : JavaScript Library to manage Html5 Canvas Element

    January 6, 2013 | Animation, Core Java Script, HTML5
    jCanvaScript : JavaScript Library to manage Html5 Canvas Element

    jCanvaScript is a javascript library that provides you methods to manage with the content of a HTML5 canvas element easily. It runs on any platform (including iPhone, iPad, Android) that supports canvas and JavaScript. To add support for canvas in Internet Explorer you can use ExCanvas.

    Features:

    • Fully Object Oriented
    • Provides access to the canvas context
    • Provides mouse-events to all objects
    • Provides keyboard-events to all objects
    • Provides drag’n’drop
    • Easy methods to manage objects
    • Provides easy objects animation
    Read More Demo

    tinycon : A Small JavaScript library for manipulating the favicon

    December 29, 2012 | Core Java Script
    tinycon : A Small JavaScript library for manipulating the favicon

    A small library for manipulating the favicon, in particular adding alert bubbles and changing images. Tinycon gracefully falls back to a number in title approach for browers that don’t support canvas or dynamic favicons.

    Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.

    Read More Demo

    Filter-me : jQuery plugin to filter images using canvas

    December 15, 2012 | HTML5, Image Effects, Plugins
    Filter-me : jQuery plugin to filter images using canvas

    jQuery filter.me is a jQuery dependant script that allows you to apply filters to images using Photoshop .acv Curves Adjustment files. jDataView is used to read the Photoshop file, from which we create a Monotonic Spline Curve representing its data. From this curve the new pixel RGB values can be calculated. These values are then applied using HTML5’s canvas element.

    Literally any Photoshop curves file can be applied to multiple images with ease. This is a great alternative to using something like PHP’s imagemagick to try and replicate similar filtering. It can sometimes be a little slow, especially in mobile browsers, but I’m sure this will improve as canvas becomes more mainstream.

    Read More Demo

    Fancy Product Designer : jQuery plugin

    December 7, 2012 | Drag & Drop, HTML5, Plugins, Premium
    Fancy Product Designer : jQuery plugin

    Let me introduce the first Product Designer here on jQueryRain. You can use this plugin for any type of product. Use it as T-Shirt Designer, Business Card Designer, Device Designer….no limits!
    You do not need any vectors files for the plugin, you just set png images for your elements and you tell the plugin which element can be colorized by the user. If its can be colorized, the image will be converted in a HTML5 canvas element.

    Features:

    • Converts png files in HTML5 canvas for colorization
    • Let the user add custom texts to the product
    • Add unlimited motives
    • Colorizable elements by static colors or colorpicker
    • Let the user drag, move, remove or rotate the element
    • Great API to integrate it in any Shop System
    • Add unlimited custom fonts to the font dropdown, you only need the woff file of your font
    Read More Demo

    Sketch.js : Simple Canvas-based Drawing for jQuery

    December 4, 2012 | HTML5, Plugins
    Sketch.js : Simple Canvas-based Drawing for jQuery

    Sketch.js is an easy-to-use jQuery plugin that allows you to create canvases upon which visitors can draw. The code is partially inspired by William Malone’s drawing app tutorial as well as CanvasPaint.

    Read More Demo

    filtrr : Javascript image filters library

    November 27, 2012 | Core Java Script, Image Effects
    filtrr : Javascript image filters library

    Filtrr2 is a JavaScript image manipulation library. Think of it as Instagram filters on the browser. It uses the <canvas> element to paint filtered pictures in the place of normal pictures on your website.Filtrr has a many image effect like Brighten, Saturate, Gamma, Adjust, Expose, Curves, Sharpen, Blur, Fill, Subtract, Sepia, Contrast, Posterize, Invert,  Alpha.

    Blending modes

    1. Multiply
    2. Screen
    3. Overlay
    4. Soft Light
    5. Addition
    6. Exclusion
    7. Difference
    Read More Demo

    fabric.js : JavaScript Html5 Canvas Library

    October 31, 2012 | Animation, Core Java Script, HTML5, SVG Tutorial
    fabric.js : JavaScript Html5 Canvas Library

    Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

    Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

    Read More Demo

    Filter Slider : jQuery Image Manipulation

    October 24, 2012 | Ajax, HTML5, Image Effects, Plugins, Premium, Slider
    Filter Slider : jQuery Image Manipulation

    The main goal of FilterSlider is to manipulate images and HTML content using canvas, jQuery library and Javascript.It uses advanced techniques to produce some of the popular effects like grayscale, sepia and saturation along with 13 other useful effects.These effects work on all major browsers that support the ‘canvas’ element.

    features:

    • Responsive layout
    • 16 filter effects for images and html content
    • Full width support
    • Powerfull API : init, destroy, next item, previous item, jump to item, stop auto, resume auto, action on each slide
    • Adjustable speed, transition, easing and effects for each caption or slide
    • Multiple sliders on the same page
    • Support for inline content
    • Animated blocks
    • Easily customizable via CSS file
    • Loading screen
    • Set start slide index
    • Can be easily loaded using ajax
    • Smart scale mode for images
    • 7 transition effects
    • Autoplay and stop parameters
    • Show/hide arrows and navigation
    • Randomize slides
    • Constant support and upgrades
    • Mouse wheel support
    Read More Demo

    PaintbrushJS : Browser-based Image processing JavaScript library

    October 21, 2012 | Core Java Script, Image Effects
    PaintbrushJS : Browser-based Image processing JavaScript library

    PaintbrushJS is a lightweight, browser-based image processing library
    that can apply various visual filters to images within a web page.

    You use it by applying a class to an element on the page and setting
    a few parameters with some extra HTML attributes. If the element is
    an img or it has a background-image set in your CSS, PaintbrushJS
    will create a temporary canvas element and manipulate the image
    there, before finally saving it back out to the original element.

    Read More Demo

    D3 Cloud : Create word clouds in JavaScript & Html5

    October 6, 2012 | Core Java Script, HTML5
    D3 Cloud : Create word clouds in JavaScript & Html5

    D3 Cloud is a Wordle-inspired word cloud layout written in JavaScript. It uses HTML5 canvas and sprite masks to achieve near-interactive speeds. This layout requires D3. It’s similar to d3.layout.force, in that it’s asynchronous and stateful.

    Read More Demo