Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    jQuery Handwriting Plugin

    December 15, 2013 | Plugins, Premium, Text Effect
    jQuery Handwriting Plugin

    This is a javascript based tool that uses the canvas object to draw symbols. Each symbol is defined using multiple curves and each curve consists of start, end and control point. The tool comes with two sets of curves with limited number of symbols, but more symbols and more sets can be created and added to the tool in the future. The tool allows decoration of the curves with images defined by user. While the tool features more than 20 options to customize it can be used in a simple configuration.

    Features:

    • two sets of symbols The tool features two sets of symbols – one similar to Verdana font, and another one with more calligraphic look.
    • 85 symbols in each set These are A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 . , ! ? ( ) [ ] ; : @ $ % & * = + – / ’ ” > <
    • size of animated symbols Can be set using a scale parameter.
    • size of line height
    • color of text
    • stroke width
    • top/left offset
    • text alignment
    • curves speed drawing.
    • Pen can use different image set by user. Pen ball must be in top/left corner of pen image. Pen can be hidden.
    • images Images can be used in the animation and are managed with several parameters.
    • stroke above image.
    • pause
    • replay.
    • finish effect.
    • overall speed.
    • complete/
    Read More Demo

    lattice : jQuery 2-dimensional HTML grid slider plugin

    December 14, 2013 | Animation, Plugins, Slider
    lattice : jQuery 2-dimensional HTML grid slider plugin

    A jQuery plugin that creates a 2-dimensional HTML grid slider from cell elements in a container.

    Features:

    • Navigate slides in two dimensions.
    • Generates a map of thumbnails representing each slide to navigate.
    • Specify thumbnail images for each slide. Thumbnails can be resized.
    • Restrict paths that can be followed.
    • The slider and the slides themselves are responsive
    • Use crop settings to crop to one of 9 areas of a slide as the slider decreases in width/height
    • Can dynamically generate thumbnails via a canvas screenshot of a slide. Thanks @niklasvh for the html2canvas project!
    Read More Demo

    jQuery Cropbox plugin

    December 8, 2013 | HTML5, Plugins
    jQuery Cropbox plugin

    jQuery plugin for in-place image cropping (zoom & pan, as opposed to select and drag).

    This plugin depends only on jQuery. If either Hammer.js or jquery.hammer.js is loaded, the cropbox plugin will support gestures for panning and zooming the cropbox. Similary, if the jquery.mousewheel.js plugin is loaded, then the cropbox plugin will support zoom in & out using the mousewheel. All dependencies on third party libraries (other than jQuery) are strictly optional. Support for CommonJS and AMD loading is built in.

    In browsers that support the HTML5 FIle API and Canvas API, the cropbox plugin provides mehtods to crop the image on the client and obtain the resulting cropped image as a Data URL or a binary blob to upload it to the server.

    Read More Demo

    jQuery Smart Timer And Counter

    December 2, 2013 | Plugins, Premium, Responsive
    jQuery Smart Timer And Counter

    Smart Timer And Counter is a jQuery plugin that can be used to add timers and clocks to the web page. Plugin is highly configurable and expandable through custom skins (visual component), modes (clock/timer logic) and languages (translate labels).

    • Styling is done using CSS (and Canvas for Circular skin), and all included styles are pure CSS with no images used.
    • Responsive, uses media queries to change counter sizes, and it can break into multiple lines on smaller screens.
    Read More Demo

    PhotoJShop : jQuery Photo editing Library

    November 15, 2013 | Image Effects, Plugins
    PhotoJShop : jQuery Photo editing Library

    PhotoJShop is a JavaScript library for photo editing using the canvas, aiming to reproduce most usual filters.The idea is to provide a simple library to developers that will allow quick integration of photo filters to their website.

    Read More Demo

    My Weather – IP : jQuery plugin Show Weather using your IP Address

    November 13, 2013 | Plugins
    My Weather - IP : jQuery plugin Show Weather using your IP Address

    “My Weather – IP” is a jQuery plugin that automatically find your location using your IP address, check the weather in that area and gives you useful information about your location.

    Feature:

    Gives you the Weather, City, Country, IP, Latitude, Longitude and Temperature.
    – Callback ready to obtain those values.
    – A lot of optional properties to change.
    – Can create a popup with that information.
    – Animated icon ready on browsers that support canvas. Otherwise, works with a very nice PNG.
    – Easy to set up.
    – No PHP, MySQL, ASP knowledge required.

    Read More Demo

    rainyday.js : Simulating raindrops falling on a window

    October 31, 2013 | Core Java Script, HTML5
    rainyday.js : Simulating raindrops falling on a window

    The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface.rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components.

    Read More Demo

    Chart.js: Simple HTML5 Charts using the Canvas element

    October 28, 2013 | Chart & Graph, Core Java Script, HTML5
    Chart.js: Simple HTML5 Charts using the Canvas element

    Chart.js easy, object oriented JavaScript charting libaray with html5 canvas for designers and developers. It currently supports 6 chart types (line, bar, radar, pie, column and polar area) and all this comes in a standalone, <5kb package.

    Read More Demo

    jQuery Wave Plugin

    October 15, 2013 | HTML5, Plugins
    jQuery Wave Plugin

    jQuery plugin for drawing waves using HTML5 canvas 2d.

    Read More Demo

    Matrix Effect Using HTML5 and Javascript

    October 14, 2013 | Animation, Core Java Script, HTML5
    Matrix Effect Using HTML5 and Javascript

    Now a days I am playing around with HTML5 Canvas API and Java Script. It’s an amazing option to create animations.

    This weekend I saw The Matrix movie.This film known for it’s visual effect.
    I wrote one Matrix function In which I am filling canvas with “Matrix” word at random locations using Canvas fillText method. And I am calling that function using Javascript setInterval Method.

    Read More Demo