Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    Prism Effect Slider with HTML5 Canvas & JavaScript

    Prism Effect Slider with HTML5 Canvas & JavaScript

    Today we’d like to show you how to build a simple slider with an interesting “prism” effect. The idea is to place a shape in front of the slider and “reflect” the images of each slide, in order to create the illusion of a prism. We’ll be using the HTML5 canvas element and plain JavaScript.

    VexFlow : JavaScript library for Rendering Music Notation

    VexFlow : JavaScript library for Rendering Music Notation

    VexFlow is an open-source web-based music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG, and runs on all modern browsers.

    Glfx.js : JavaScript Image effects library using WebGL

    Glfx.js : JavaScript Image effects library using WebGL

    Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone.This library provides realtime image effects using WebGL. There are three parts to glfx.js:

    • texture: a raw source of image data (created from an <img> tag)
    • filter: an image effect (represents one or more WebGL shaders)
    • canvas: an image buffer that stores the results (a WebGL <canvas> tag)

    minBlock.js : Javascript Canvas Matrix Grid

    minBlock.js : Javascript Canvas Matrix Grid

    Is a Pure Javascript Canvas Implementation of Matrix Grid ( Primary Application was to Generate Github Like Random Avatar using minBlock.js or Pixel Pattern)

    HTML5 Meme Maker

    HTML5 Meme Maker
    • Upload any image you want, comes with a set of pre-installed meme templates to get you started
    • Fully HTML5 Meme Maker
    • User Canvas and other advanced techniques
    • Works on Mobile devices like iPad, iPhone etc
    • Drag text captions, choose size, color, outline
    • Create and share to Facebook
    • Each generated meme gets its own page that can be shared anywhere!

    Water ripples effect : jQuery Plugin

    Water ripples effect : jQuery Plugin

    This javascript jQuery plugin to simulateWat water ripples on the surface of an image. There are quite a few code snipplets on the internet to simulate water ripples in javascript-canvas.

    HTML5 Signature Pad to Image

    HTML5 Signature Pad to Image

    Need a customer’s signature saved to an image? This is the perfect solution! Draw, sign or touch-n-slide to add your signature and save it to an image format with transparency. It’s the perfect solution if you need a signature for legal documents, purchase invoices, contracts or other important docs.

    Easy to use Plug-n-Play app for any web browser, iPhone, iPad or iPod Touch that supports HTML5 and Canvas image export.

    Features :

    • Save signature directly to PNG
    • Customizable Color Palette
    • Pencil Sizes
    • Unlimited Undos
    • Quick Signature Clear
    • Tons of Javascript Settings

    Resizing and Cropping Images with HTML5 Canvas

    Resizing and Cropping Images with HTML5 Canvas

    In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications.

    CanvasJS : jQuery Charts Plugin

    CanvasJS : jQuery Charts Plugin

    CanvasJS Charting Plugin for jQuery lets you add beautiful & interactive charts to your web page with a few lines of code. Charts have high performance and can run across devices include Desktops, Tablets, iPhone, Android, etc. Supports features like dynamic updates, events, zooming, panning, etc.

    Spinners : jQuery loading Icons through Canvas

    Spinners : jQuery loading Icons through Canvas

    Spinners is a JavaScript library that creates pixel-perfect cross-browser loading icons through Canvas.