HTML5 Canvas & JavaScript
by Christopher Heppell

Using this program

There are four buttons which allow you to set the state of the face to one of three moods, or clear the face from the canvas entirely.

We've now drawn in a simple face, but this isn't particularly exciting. Click above the eyes to grow some eyebrows and make the drawing look a bit more realistic.

Now click on the nose to draw a mustache onto our face.

Now look at the sad face (press the Sad button to switch to it). We really want that face to be happy, so click on the sad mouth and watch it turn around into a smile.

Now things don't always go our way, and that might make us get upset. Click on either eye to make our face cry. You can repeat this again and again by clicking on the eyes again.


Picture of Donald Trump's 'Hair' has been produced from his Official Portrait which as a work of an employee of the US Federal Government, is public domain.

Tear drop image has been self produced in Adobe Photoshop.

A known bug

When calling either of the two animated features, some lines already drawn on the canvas can have their lineWidth changed. It is intriguing that this happens, but I have found no solution. The features in question are not cleared from the canvas by the clear(x, y, w, h) function, neither are their draw functions called again (though doing so could convieniently create the illusion of making this problem going away), so I'm currently at a loss with this issue.