I decided I’d try to learn a little more about the new technologies featured in HTML5, one of these being the new Canvas element. This allows for easier 2D graphics rendering using Javascript in a native manner, and can be used to make some cool things.

canvas

I found an open source project, a HTML5 Canvas Sketchpad by krisrak, and decided to try adding a few features to it.

I added the following features:

  • The ability to save the sketch as a .PNG file, making it possible to share sketches made.
  • Changeable canvas colours
  • Ability to modify brush sizes.

A few future improvements I could make:

  • A more in-depth colour selector, with the ability to pick any hexadecimal color value.
  • A tools menu, with the ability to draw polygons etc.
  • Drag and Drop image support, drag an image in, sketch on top of it.

I’ll probably make a pull request to the original developer once I polish a few of these features, but so far this project has been a fun little introduction to the new canvas element.