Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    jQuery Meme Generator Plugin

    jQuery Meme Generator Plugin

    Meme Generator is a jQuery plugin allowing easily creating images with captions (memes). It doesn’t require any special markup, you can use it on any <img> and the plugin will handle the rest. It uses HTML5 Canvas to create images.

    Features:

    • Seperate styling for each text box
    • Drawing tool with customizable color and size
    • Two preview modes – canvas and CSS – latter being more suitable for slow machines
    • Saving image as data url or canvas
    • Predefining captions

    InfiniteRPS : Simple Browser Game with jQuery & HTML5 Canvas

    InfiniteRPS : Simple Browser Game with jQuery & HTML5 Canvas

    Simple browser game built with JS, jQuery and HTML5 Canvas. A simple sidescrolling RPS game that pits you, a shape shifter, against an infinite amount of rocks, pieces of paper, and pairs of scissors. Shift into the correct form to defeat your foes! Levels become progressively more difficult as the number of enemies and the speed at which they approach increases.

    Create a Dynamic Point Mesh Animation with HTML5 Canvas

    Create a Dynamic Point Mesh Animation with HTML5 Canvas

    A great tutorial by Dudley Storey where he teaches how to master a dynamic point mesh animation using Canvas.

    HTML Canvas Gauges using JavaScript

    HTML Canvas Gauges using JavaScript

    Canvas Gauges is tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

    Instagram-style filters in HTML5 Canvas

    Instagram-style filters in HTML5 Canvas

    Convert HTML to Image in jQuery

    Convert HTML to Image in jQuery

    This article explains how to convert div to an image in jquery. Yes, we are going to generate an image from our HTML page on client-side using jQuery. We can also convert a particular part of our Webpage (Asp.net C# Web project/ PHP). All we need HTML tag, and using html2canvas js library we can create images .i.e converting HTML table to Image PNG, JPG or converting DIV, UL, LI tag into Jpg image format.

    Canvas Dots with jQuery & HTML5

    Canvas Dots with jQuery & HTML5

    Random moves of particles, count of dots and connection distance selected by smart algorithm depend from count of dots and square of block. Working on most browser (include mobile devices) without braking. Particles leave from mouse cursor.

    jQuery Spinning 3d Earth Plugin

    jQuery Spinning 3d Earth Plugin

    jQuery plugin that allows you to draw a beautiful 3d spinning earth on canvas. Based on the amazing sphere.js plugin of Sam Hasler, jquery.earth3d.js is an open source jquery ui plugin which will allow you to emulate a 3d earth (or any planet actually) on canvas.

    Origami.js : Create things with HTML5 Canvas

    Origami.js : Create things with HTML5 Canvas

    Origami.js was originally designed as a teaching tool for geometry, JavaScript, and the web in schools. It’s evolved into a powerful library for creating things with HTML5 canvas.

    atrament.js : JS library for beautiful Drawing

    atrament.js : JS library for beautiful Drawing

    Tiny JS library for beautiful drawing and handwriting on the HTML Canvas.Atrament is a lightweight library that enables the user to draw smooth, natural drawings and handwriting on the HTML canvas. The algorithm was originally developed about 2 weeks after I started learning JavaScript, as I wanted to build a collaborative drawing space on the web, which ended up being 1WALL.