Skip to main content

jQuery HTML5 Canvas Plugin – Gury

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

gury

Hi guys, I stumbled upon a pretty cool html5 canvas utility library which uses jQuery to and html5 to create some awesome animation effects with the new canvas element. The days of using flash are over!

Demo API Core Library

Features

gury-examples

  1. .canvas – styles/actions of the canvas
  2. place(node) / .place(selector) – easy add to element for canvas
  3. .size(width, height) – size of canvas
  4. .background(color) – background color
  5. .register(canvas) – allowing effects to be given to multiple canvases on the same page
  6. .ctx – the graphics context

Usage Example

$("my_canvas").size(200, 200).background('black').add(function(ctx) {
  ctx.fillStyle = "red"
  ctx.fillRect(10, 10, 180, 180);
}).draw();

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.