Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    Two.js : Two-dimensional Drawing API

    Two.js : Two-dimensional Drawing API

    A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.Two.js is deeply inspired by flat motion graphics. As a result, two.js aims to make the creation and animation of flat shapes easier and more concise. At the time of this writing two.js unfortunately does not support text or images.

    Two.js has a built in animation loop. It is simple in nature and can be automated or paired with another animation library.At its core two.js relies on a scenegraph. This means that when you draw or create an object (a Two.Polygon or Two.Group), two actually stores and remembers that. After you make the object you can apply any number of operations to it — e.g: rotation, translation, scale, etc..

    html2canvas : Screenshots with JavaScript

    html2canvas : Screenshots with JavaScript

    This script allows you to take “screenshots” of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

    The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.It does not require any rendering from the server, as the whole image is created on the clients browser.

    Interactive Particles Slideshow with Html5 & JavaScript

    Interactive Particles Slideshow with Html5 & JavaScript

    This is an experimental interactive slideshow component with math shapes and texts using Html5 Canvas. The slideshow consists of pairs of shape and text, both made out of particles that the user can interact with and that transition into the next pair when navigating. With Canvas we can dynamically draw 2D stuff using JavaScript and this experiment shows some of the possibilities.

    jQuery Panzoom : Plugin for panning and zooming elements using CSS3

    jQuery Panzoom : Plugin for panning and zooming elements using CSS3

    Panzoom is a progressive plugin to create panning and zooming functionality for an element. Panzoom supports the same browsers as jQuery 2.0 and can be used with jQuery 1.9.0+ or jQuery 2.0+. Rather than setting width and height on an image tag, Panzoom uses CSS transforms and matrix functions to take advantage of hardware/GPU acceleration in the browser, which means the element can be anything: an image, a video, an iframe, a canvas, text, WHATEVER.

    Panzoom includes support for touch gestures on iOS and Android and even supports pinch gestures for zooming. It is perfectly suited for both mobile and desktop browsers. You’ll be amazed at how well this performs on your mobile device.

    MindMup MapJs : Zero Friction Mind Map Canvas with jQuery

    MindMup MapJs : Zero Friction Mind Map Canvas with jQuery

    MindMup is a zero-friction mind map canvas. Our aim is to create the most productive mind mapping environment out there, removing all the distractions and providing powerful editing shortcuts.

    This git project is the server-side portion of MindMup. It provides a web interface that serves maps, allows users to edit and save them, provides menus and feedback forms and links to analytics. All maps are public, and each time anyone saves a map the changed version gets a unique URL.

    gury : jQuery inspired canvas utility library

    gury : jQuery inspired canvas utility library

    Gury (pronounced “jury”) is a simple to use utility library for drawing, animating, and managing HTML5 canvas tags. The goal is to support the HTML5 Canvas API with a framework that allows for faster/easier application development.

    It was built with simplicity in mind and its usage was modeled in the image of jQuery. For instance you can initialize, style, and animate an entire scene in a single expression using chaining.

    DROPAREA : jQuery Html5 drag-drop file uploader plugin

    DROPAREA : jQuery Html5 drag-drop file uploader plugin

    droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).

    Originally it has:

    • client-side image resizing with canvas on browser option
    • data url option for sending a file/image as a text field with ajax
    • click event for browsing files

    canvasResize : jQuery Client side Image resizing plugin

    canvasResize : jQuery Client side Image resizing plugin

    canvasResize is a plugin for client side image resizing.It’s compatible with iOS6 and Android 2.3+ It can work both with jQuery and Zepto.

    I fixed iOS6 Safari’s image file rendering issue for large size image (over mega-pixel) using few functions from ios-imagefile-megapixel and fixed orientation issue by using exif-js.You can change image size and quality with plugin options easily.

    Zebra : HTML5 Canvas Rich UI JavaScript Library

    Zebra: Desktop-Like User Interface With HTML5 Canvas

    Zebra is a javaScript library that follows easy OOP concept, provides HTML5 Canvas based Rich UI and includes Java to JavaScript converter tool .The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI. Zebra development is much closer to software engineering where you write well structured, supportable, extendable code basing on easy Zebra OOP concept. You keep distance from the mess of HTML, JavaScript code, CSS and DOM manipulation. Zebra is pure WEB based alternative to Flash or Applet technologies that doesn’t require a plugging on a client side to be installed. In the same time Zebra utilizes power, simplicity and beauty of JavaScript coding.

    Features:

    • Over 30 UI components
    • Customizable look and feel (theme support)
    • Flexible layouts
    • Declarative JSON-based UI
    • Easily extendable

    ClassyGradient : jQuery Gradient Maker Plugin

    ClassyGradient : jQuery Gradient Maker Plugin
    ClassyGradientis a jQuery plugin that allows you to add a gradient generator to your web applications and websites. Smart and fully cutomizable, it is suitable for any type of use: CSS generators, HTML5 canvas applications, live usage.

    • Unlimited gradient points.
    • HTML5 Browsers compatible (IE9 +).
    • Generate CSS code.
    • Customizable by CSS.
    • Can easily be combined with HTML5 canvas.
    • No server files, only jQuery & CSS.