Best jQuery HTML5 canvas Plugins & Tutorials with Demo

Warp drive : jQuery HTML5 canvas based Starfield effect.

Warp drive : jQuery HTML5 canvas based Starfield effect

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

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.