Best jQuery HTML5 canvas Plugins & Tutorials with Demo

    BlockBlaster : HTML5 Game using JS and Canvas

    BlockBlaster : HTML5 Game using JS and Canvas

    First real crack at making an HTML5 game using JS and canvas element.

    Blurry Menu with jQuery & Html5 Canvas

    Blurry Menu with jQuery & Html5 Canvas

    A blurry menu for all kind of websites. The blur effect is added dynamically and context sensitive to all displayed web-contents like images, texts and even background-images. This script uses existing scripts like html2canvas and Superfast Blur.

    Yoshi : Html5 Particle Effects System

    Yoshi : Html5 Particle Effects System

    You’re most likely looking for something specific – not a generic plugin that will bend to your needs. CodeDroid12 plugins are not all-in-one or multipurpose. They’re built to serve one specific task well – and usually with a quick Copy & Paste approach. The idea is to get your problem fixed as fast and efficiently as possible – without you needing to even waste time reading documentation.

    • Includes generator page
    • Includes all shown presets
    • Built awesome particle effects in seconds
    • Rain, Snow, Bubbles, Dust, Orbital, Molecules, Wind, Electricity and much more!
    • No Coding Skills Needed
    • Awesome, unique and fun!

    Prideify.js : jQuery Rainbow Stripes Image Effect

    Prideify.js : jQuery Rainbow Stripes Image Effect

    Inspired by https://facebook.com/celebratepride – a super-lightweight library (< 100 lines of code) to “prideify” (add rainbow stripes to) any image using the <canvas> API.

    PixelFlow.js : jQuery Image Pixelating Plugin

    PixelFlow.js : jQuery Image Pixelating Plugin

    PixelFlow.js is an image pixelating filter jquery plugin using canvas.

    Pixi.js : A 2D JavaScript Renderer

    Pixi.js : A 2D JavaScript Renderer

    Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback.The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL.

    Features:

    • WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
    • Canvas renderer (Fastest in town!)
    • Full scene graph
    • Super easy to use API (similar to the flash display list API)
    • Support for texture atlases
    • Asset loader / sprite sheet loader
    • Auto-detect which renderer should be used
    • Full Mouse and Multi-touch Interaction
    • Text
    • BitmapFont text
    • Multiline Text
    • Render Texture
    • Spine support
    • Primitive Drawing
    • Masking
    • Filters

    Text Styles and Hover Effects with CSS3 & SVG

    Text Styles and Hover Effects with CSS3 & SVG

    A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.

    jQuery toCanvas : Add effects to Images & Videos

    jQuery toCanvas : Add effects to Images & Videos

    This jQuery plugin allow you to add effects to images and html5 videotags easily. It supports different types of processed effects and overlay

    HiDPI Canvas Polyfill

    HiDPI Canvas Polyfill

    A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support. The goal of this drop-in is to make this behavior consistent accross all browsers, without having to modify any of your canvas code.

    Filecons.js : Pure JavaScript File Icons

    Filecons.js : Pure JavaScript File Icons

    Filecons.js is a set of file icons generated using JavaScript and HTML5 canvas. Everything is encapsulated into a single file – no external images or CSS. The only external file is the Open Sans font, which is being loaded automatically by the script. All icons are infinitely resizable and can be easily customized.