How to draw a smiley cookie face using html5 canvas?

How to draw a smiley face as shown below using html5 canvas.

Well, it's not as complicated as it looks. The picture includes below parts:

1. outer face circle
2. two circular eyes
3. one straight line nose
4. a smile arc

The above basic parts can be drawn using arc and moveTo methods of context object and it involves a little calculation as to where to place the sub parts so as to sync the whole face symmetrically.

Code:

<canvas id="smiley" width="800" height="600">

<script>
    drawSmiley();

    function drawSmiley() {
        var canvas = document.getElementById("smiley");
        var context = canvas.getContext("2d");

        // Draw outer face circle
        context.beginPath();
        context.arc(300, 300, 100, 0, degreesToRadians(360), true);
        context.fillStyle = "#ffffcc";
        context.fill();
        context.stroke();

        // Draw left eye circle
        context.beginPath();
        context.arc(250, 270, 15, 0, degreesToRadians(360), true);
        context.stroke();

        // Draw right eye circle
        context.beginPath();
        context.arc(350, 270, 15, 0, degreesToRadians(360), true);
        context.stroke();

        // Draw straight line nose
        context.beginPath();
        context.moveTo(300, 285);
        context.lineTo(300, 330);
        context.stroke();

        // Draw smile arc
        context.beginPath();
        context.arc(300, 330, 55, degreesToRadians(20), degreesToRadians(160), false);
        context.stroke();
    }

    function degreesToRadians(degrees) {
        return (degrees * Math.PI) / 180;
    }
</script>

I know the face looks a little out of place but you can do it better I know ;)

Click here for a demo.

How to draw a quarter circle arc using canvas?

Using canvas, we can draw a circle or a circular arc using the arc method of the context object.

The basic syntax of the arc method is:

context.arc(x, y, radius, start_angle, end_angle, direction)

Parameters:
x, y              are the center point co-ordinates
radius          (of the arc)
start_angle  Position where the arc should start (in radians)
end_angle   Position where the arc should end (in radians)
direction     Whether to start tracing in clockwise or anti-clockwise direction.  (bool)
                   true indicates anti-clockwise and false indicates clockwise direction.

So one can modify the start_angle, end_angle and the direction to trace any part of a circle. To draw a quarter circle arc, we need to start at 0 degree and end at 270 degrees but we need to trace in anti-clockwise direction so direction value would be true.

Relationship between radian and degrees:

2 * Pi  Radians = 360 degrees

Code for a quarter-circle arc:

<canvas width="600" height="400"></canvas>
<script>
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");

    context.beginPath();
    context.arc(100, 100, 75, 0, degreesToRadians(270), true);
    context.stroke();

    function degreesToRadians(degrees) {
        return (degrees * Math.PI) / 180;
    }
</script>


Click here for a demo.

How to draw a triangle using Canvas?

Canvas is basically a space in the web page where you draw graphics using javascript. Everything on a canvas is all about canvas.

So to start, lets have a canvas space over a 600 x 400 pixel area.

<canvas width="600" height="400">

The next thing we need to do is get a reference to the canvas element and get a context reference to it. Context is basically an object with methods and properties that allows us to draw on the canvas.

To draw a triangle, we basically have to start at a point and proceed along a line then move on to another point tracing along the path as we do so. The basic point is to first create a path and then stroke or fill it, so as to make it visible.

Below is the code to draw a triangle on a canvas:

<script>
    // Get dom reference to canvas element
    var canvas = document.getElementsByTagName("canvas")[0];

    // Get context reference to canvas
    var context = canvas.getContext("2d");

    // Begin a path with beginPath() method
    context.beginPath();
    context.moveTo(100, 150);

    // Traces a line path from current point to specified point
    context.lineTo(250, 75);
    context.lineTo(125, 30);

    // Closes the path by joining from current point to point where
    // path began first
    context.closePath();
    context.lineWidth = 5; // Sets the line width

    // Make the path visible by stroking it
    context.stroke();

    // Fill inside of the closed path structure with color
    context.fillStyle = "red";
    context.fill();
</script>


Click here to see a demo.

HTML5 CANVAS Bring out the inner artist in us

It's time to get our hands dirty with some colors and bring out the inner artist and creationist within us to fore. HTML5's CANVAS element provides us with a virtual canvas which is similar to the leather canvas which real world painters and artists use to draw wonderful art and what not.

Some use cases to which the CANVAS element can help us in:
1. To create a simple drawing structure like a circle, ellipse which may be part of a larger design.
2. To create an animation of written letters created slowly to create an illusion of an invisible hand writing.
3. To create html5 based games based on the idea of "update and loop" principle and "persistence of vision" concept.
4. To develop a platform for real-time creation of structures like charts, hierarchical box shaped structures one beneath other etc.

There are many more of which I am ignorant right now, but will update as soon as I know about it.

Stay tuned as we begin our journey as an artist, thinker, designer, creationist and what not :)