Today I wanted to take a look at extending the HTML5 canvas object to add shapes to it. The canvas object comes with some basic functions allowing us to draw things like rectangles and lines but it doesn’t come packaged with even a more basic subset of shapes like circles, ellipses or rounded corners. I was creating a variety of shapes for the new wPaint 2.0 version I’m currently working on and thought I would share some of the functions I created.
The idea is to streamline the canvas object so that we can just make function calls like
.rect(x, y, w, h),
.ellipse(x, y, w, h),
.roundedRec(x, y, w, h, radius) and so on. Below are 10 shape examples with a couple bonuses like
ninjaStar. Read Full Article
Websanova Paint is a HTML5 canvas based jQuery plugin. It allows you to free paint on a canvas area with various shapes and colors including an eraser. It also features the fantastic Websanova Color Picker allowing you to set both border and fill colors. The canvas area can be set to any size you like and perhaps it’s greatest feature is the ability to save your drawing as an image and then load it back in later. In fact you can load any image in as your drawing as long as it is a base64 encoded PNG image. Read Full Article
The Websanova Scratch Pad is a unique one of a kind plugin that allows you to add a scratching effect to images something similar to scratching a lottery ticket. It is written using canvas so you would need an HTML5 compliant browser to use it but it does support a fallback to display a message to upgrade to a newer browser if the browser does not have canvas support. What’s really cool is that it keeps track of the percentage of area scratched so that you can trigger a callback once a user scratches a certain amount of the surface area. Definitely a fun little plugin to entertain your users with. Read Full Article