Quickly & Easily Manipulate HTML5’s Canvas Element With jCanvas

Danny Stieben 09-07-2011

The web as we know it is evolving faster than ever before. As of late, HTML5 is coming into the scene, providing the capability of developing highly interactive web apps without the need for the proprietary Flash. Instead, all a user needs is a supported, modern web browser, and they’ll be able to enjoy the best of what the web has to offer.


However, creating such interactive content is never as easy as pie, and that rule doesn’t exclude HTML5’s main element that does all the work: canvas. If you’ve been following what the latest browsers have to offer, some of them may include a GPU-accelerated experience that makes the canvas element run a lot better. There are frameworks available that try to make the canvas element a little bit easier to develop for, notably jQuery. But even then, jQuery makes you type quite a bit. Web developers, here’s something better for you.

About jCanvas

html 5 canvas tag

jCanvas is a little jQuery plugin written entirely in JavaScript that makes working with jQuery, and thereby HTML5’s canvas element, a lot easier. Web developers will get a lot of benefit out of using jCanvas. By using jCanvas, you get to work with much simpler code, in which the plugin will do the work and translate it into the relevant code for jQuery to run.

Examples of Use

html canvas html

jCanvas can draw a large number of objects. For example, here we can see an ellipse that is filled in with a gradient. There are plenty of parameters that you can set and still keep the amount of actual code as small as possible. In this example, the gradient parameters were set first (distances, colors, etc.), followed by the drawing of the ellipse itself. For programmers, this should be a very eye-appealing way to write code with no over-the-top syntax.


html canvas html

In this example, a regular jpg image is being halfway inverted. The first function (or set of instructions) sets how the inversion takes place, while the second function draws the image and loads the inversion function onto it. When the code runs, you get a halfway-inverted image.

html 5 canvas tag

In our final example, different shapes are drawn by means of different functions provided by jCanvas. The green, unfilled rectangle was drawn by a simple function dedicated to rectangles. As always, you can customize your rectangle, even with parameters for the stroke width and corner radius (the amount that the corners should be rounded). The pentagon is drawn by a more generic function that applies to all regular polygons. You can also apply all the same parameters as with the other functions.


The difference is important because you can draw a square with both the rectangle and polygon functions, but you can only draw rectangles with the rectangle function. (Squares are rectangles, but rectangles aren’t always squares!)

Other Information & Support

There’s a lot more you can do with each function, plus there are many more functions that you can use! You can download jCanvas by going here. If you need any help, the full, well-written Documentation page should clarify most if not all questions. If that still doesn’t work, you can contact the developer of jCanvas by checking out his information here. If you wish to try out jCanvas before playing around with it on your own site, the developer has set up a very cool-looking Sandbox page where you can enter code and watch the magic happen.

Finally, if you would like to help contribute to the open source jCanvas project, you are more than welcome to do just that by going here. jCanvas is always being improved by the developer, and new releases are made available every few weeks.


jCanvas is a great web tool to use to make your programming experience much simpler, especially if you are a heavy user of the canvas element. Again, some of the highlight features are:

  • Draw shapes, paths, images, and text.
  • Style these using colors, gradients, patterns, and shadows.
  • Manipulate the canvas (rotate, scale, etc).
  • A huge range of options to suit your needs.

Internet users will thank you as well for using jCanvas, because you’ll have more time to completely develop your web app and make sure that it has all the functionality you want it to have while enjoying great performance.

Are you a web developer who is involved in HTML5? Do you think jCanvas will help you with your development? What features would you like to see in jCanvas? (please check the documentation first for what’s already implemented!).

Image Credit: Just Insomnia

Related topics: HTML, HTML5, JavaScript, Web Design, Web Development, Webmaster Tools.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

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