How to Draw Stick Man in HTML5 Canvas using Javascript
This HTML5 tutorial shows how to draw stick man in HTML5 Canvas dynamically using Javascript programming methods introduced with HTML5. HTML5 Canvas provides HTML developers a 2d drawing area where they can modify canvas using Javascript.
First of all, do not forget to include Canvas tag in your HTML5 page source codes.
<canvas id="canvas1" width="400px" height="300px" >
Your browser does not support HTML5 Canvas element
</canvas>
Below is required Javascript codes for drawing stick man programatically in HTML5 Canvas element. To draw stick man in canvas on HTML5 page is as simple as drawing it on a paper using a pen :) Of course if the HTML5 programmer is careful about context.fill(), context.stroke() commands and context.beginPath() method for applying selected styles using fillStyle and strokeStyle properties.
If you look at the below Javascript codes, you will see context object arc() method is used to draw circles on HTML5 Canvas drawing space. HTML programmers will realize arc() method is used 4 times for head, smile and for the two eyes. For the head and eyes, I ended Javascript command block with fill() method to paint all surface area bounded with arc. But for the smile, I used stroke() method just to draw the arc as a line on the Canvas object.
And for body, arms and legs, I just draw line segments with moveTo() and lineTo() Canvas context object methods.
var canvas = document.getElementById("canvas");
if (canvas.getContext("2d")) { // Check HTML5 canvas support
context = canvas.getContext("2d"); // get Canvas Context object
context.beginPath();
context.fillStyle = "bisque"; // #ffe4c4
context.arc(200, 50, 30, 0, Math.PI * 2, true); // draw circle for head
// (x,y) center, radius, start angle, end angle, anticlockwise
context.fill();
context.beginPath();
context.strokeStyle = "red"; // color
context.lineWidth = 3;
context.arc(200, 50, 20, 0, Math.PI, false); // draw semicircle for smiling
context.stroke();
// eyes
context.beginPath();
context.fillStyle = "green"; // color
context.arc(190, 45, 3, 0, Math.PI * 2, true); // draw left eye
context.fill();
context.arc(210, 45, 3, 0, Math.PI * 2, true); // draw right eye
context.fill();
// body
context.beginPath();
context.moveTo(200, 80);
context.lineTo(200, 180);
context.strokeStyle = "navy";
context.stroke();
// arms
context.beginPath();
context.strokeStyle = "#0000ff"; // blue
context.moveTo(200, 80);
context.lineTo(150, 130);
context.moveTo(200, 80);
context.lineTo(250, 130);
context.stroke();
// legs
context.beginPath();
context.strokeStyle = "orange";
context.moveTo(200, 180);
context.lineTo(150, 280);
context.moveTo(200, 180);
context.lineTo(250, 280);
context.stroke();
}
I hope this HTML5 Canvas example will be helpful for web programmers to understand how Canvas element can be modified using Javascript. Please look other Canvas tutorials and canvas examples for more on drawing using HTML5 features.