Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    Matter.js : 2D Rigid body physics Engine for the web

    March 15, 2014 | Core Java Script, HTML5
    Matter.js : 2D Rigid body physics Engine for the web

    Matter.js is a 2D rigid body physics engine for the web written in JavaScript (yes, another).

    Features:

    • Physical properties (mass, area, density etc.)
    • Rigid bodies of any convex polygon
    • Stable stacking and resting
    • Restitution (elastic and inelastic collisions)
    • Conservation of momentum
    • Friction and resistance
    • Constraints
    • Gravity
    • Composite bodies
    • Sleeping and static bodies
    • Original JavaScript physics implementation (not a port)
    • HTML5 canvas renderer (optional)
    • Mobile-compatible (touch, scaleable)
    • Cross-browser (chrome, firefox, IE8+)
    • World state serialisation (requires resurrect.js)
    • Built in GUI for testing (requires dat.gui.js)
    • Time scaling (slow-mo, speed-up)
    • Broad-phase, mid-phase and narrow-phase collisions
    • Events (edge)
    • Sprite texture rendering (edge)
    Read More Demo

    InfinitySlider – jQuery Slider with CSS3 Animations

    March 14, 2014 | Animation, Bootstrap, CSS2 / CSS3.0, Plugins, Premium, Responsive, Slider
    InfinitySlider - jQuery Slider with CSS3 Animations

    Modern, Customizable, Clean, Fluid and Responsive. Responsive effects by default and fully compatible with Desktop, Notebook, Tablet, Smarphone, Firefox, Chrome, Opera, Safari and Internet Explorer.Image Autofit is an awesome feature that allows you to responsive your images automatically by cutting its edges and resizing its sizes, to preserve a high definition on every device and create an awesome slider for desktop and mobile.

    Features:

    • Super-Fluid CSS3 Effects & Transitions on Desktop & Mobile
    • You can select your IN/OUT/BACK Times for each element
    • HTML & CSS Content supported, you can add texts, images, videos, canvas, pricing tables, and all you want.
    • Fully Support of Video Embedding as Fullscreen or Boxed
    • Youtube & Vimeo API that stops the video if you change the slide
    • Image Autofit that allows you to select the subject position on the images
    • Cinematic Effect that allows you to make an animation-movement of the images
    • Blur Effect that allows you to make an automatic blur image from a normal one
    • Fully Cross-Browser Compatibility
    • Bootstrap 3 Integrated so you can use all the Bootstrap Elements inside the slide
    • Easy to integrate with other Frameworks
    • Font Awesome 4 Integrated
    • Fully Responsive
    • Play & Stop with the slide loader
    • Autoplay, you can active it to start your slide when the page is opened
    • Keyboard Navigation

     

    Read More Demo

    jFlat : HTML5 – jQuery Plugin change flat icons color

    March 5, 2014 | HTML5, Plugins
    jFlat : HTML5 - jQuery Plugin change flat icons color

    jFlat is the plugin to convert flat icons color. This plugin is only for HTML5 supported browsers. This plugin uses HTML5 canvas element to change flat icons color.

    Concept of the Plugin:

    1. jFlat plugin will identify the jFlat applied image elements.
    2. It will create HTML5-canvas element with same height and width of applied image element
    3. It will hide the applied image element

    Read More Demo

    jQuery ImageMap Area Canvas Editor

    February 23, 2014 | HTML5, Plugins
    jQuery ImageMap Area Canvas Editor

    jQuery plugin to create imagemap area polygon coordinates. Extends a text input to display an image with a canvas on which points may be added to create a polygon.

    Read More Demo

    Bobbograph : jQuery cross-browser canvas-based Graphing library

    February 11, 2014 | Chart & Graph, Plugins
    Bobbograph : jQuery cross-browser canvas-based Graphing library

    Bobbograph is a highly configurable Canvas-based graphing library for jQuery. It provides you with the power to render great looking graphs across all modern browsers. Bobbograph is also built to utilize Excanvas for older versions of IE that do not support Canvas.

    Read More Demo

    jQuery Turtle : Turtle Graphics for jQuery

    February 2, 2014 | Animation, CSS2 / CSS3.0, Plugins
    jQuery Turtle : Turtle Graphics for jQuery

    jQuery-turtle is a jQuery plugin for turtle graphics.With jQuery-turtle, every DOM element is a turtle that can be moved using turtle graphics methods like fd (forward), bk (back), rt (right turn), and lt (left turn). The pen function allows a turtle to draw on a full-document canvas as it moves.

    Features:

    • Relative and absolute motion and drawing.
    • Functions to ease basic input, output, and game-making for beginners.
    • Operations on sets of turtles, and turtle motion of arbitrary elements.
    • Accurate collision-testing of turtles with arbitrary convex hulls.
    • Simplified access to CSS3 transforms, jQuery animations, Canvas, and Web Audio.
    • An interactive turtle console in either Javascript or CoffeeScript.
    Read More Demo

    jQuery Stickypage plugin

    January 14, 2014 | Plugins, Web
    jQuery Stickypage plugin

    jQuery plugin to display a page with chronological sticky tags.

    Features:

    • Sticky tag can be positioned anywhere you want them to be (x,y,rotation). x, y are percentage within the canvas area (not pixel)
    • Responsive
    • User can use scrollbar to reveal sticky tags that are buried beneath the others.
    Read More Demo

    Circliful : jQuery Circle Statitic Plugin

    January 10, 2014 | HTML5, Plugins
    Circliful : jQuery circle statitic Plugin

    jQuery circle statitic plugin.

    Features:

    • show Infos as Circle Statistics, no images used
    • based on html5 canvas and jquery
    • many options can be set as data attributes
    • fontawesome integration
    Read More Demo

    jQuery Let it Snow using HTML5 Canvas

    January 2, 2014 | HTML5, Plugins
    jQuery Let it Snow using HTML5 Canvas

    Let it Snow is a little plugin that is based off the solution of creating a snow effect with HTNL5 Canvas by Jason Brown. I decided to extend its functionality so that developer will have a full control of how the animation of snow will react.

    Read More Demo

    Offreg : jQuery Plugin to turns your Images into RGB “Prints”

    December 26, 2013 | Image Effects, Plugins
    Offreg : jQuery Plugin to turns your Images into RGB "Prints"

    A jQuery plugin that uses canvas to create a ‘screen print’ offset effect on an image, by altering the pixel data.

    Read More Demo