in

JCanvas, Easy Way to Deal with HTML5 Canvas via Javascript (Jquery Plugin)

Latest HTML5 features and the potential to grow even more is the canvas. Canvas element in HTML5 is used for drawing, displaying images, as objects and others. The use of canvas will be even more when interacting with data and javascript. Where, dynamic data can be displayed better with javascript.

To interact with the canvas you can directly access it via HTML, but to make it easier to use javascript. If using javascript, we would recommend using Jquery as the main platform, and help plugins to optimize.

Introduce, JCanvas

jCanvas is a jQuery plugin that makes the HTML5 canvas easy to work with. Developers can manipulate and control the canvas itself, shapes on the canvas, their styles, and even overlay multiple canvas layers on top of each other.

JCanvas has access to the following

Canvas Manipulation:

  1. Clear canvas
  2. Rotate canvas
  3. Scale canvas
  4. Translate canvas
  5. Save canvas
  6. Restore canvas
  7. Pixel manipulation
  8. Get canvas image
  9. Draw manually
  10. Detect pixel ratio

Canvas Layer Manipulation:

  1. Layer API
  2. Add Layers
  3. Retrieve Layers
  4. Draw Layers
  5. Manipulate Layers
  6. Animate Layers

Styles Manipulation:

  1. Colors
  2. Shadows
  3. Gradients
  4. Patterns

Drawing Capabilities:

  1. Arcs
  2. Arrows
  3. Curves
  4. Ellipses
  5. Images
  6. Lines
  7. Masking
  8. Paths
  9. Polygons
  10. Rectangles
  11. Slices
  12. Text
  13. Vectors

The Advantages of Jcanvas

  1. Open source and freeware
  2. Small size, its just about 11kb – Gzipped version
  3. Completed with clean documentation. Read here

Download JCanvas now

or play JCanvas in sandbox.

Bonus!

Create animation with HTML5 Canvas

What do you think?

0 points
Upvote Downvote

Written by Bimo Hery Prabowo

Web developer, big fan of CakePHP, loving wordpress soo much. You can found him on Google+ and Facebook. Dont forget to follow him on Twitter.

One Ping

  1. Pingback:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.