This post is the sequel to my previous post of
Introduction to HTML5
In previous post we saw how
Above is the actual completed art drawn on canvas, and below we will see how we draw that art piece by piece. And Let me tell you this article is just for introducing you to the use of various methods provided by canvas and may not show the best and efficient way of drawing on it. So keeping that in mind, let’s get started.
*(for details check my previous post or w3c draft)
<Canvas>: Part 1 and shows a walkthrough example of using canvas for some static 2D drawing (for Introduction to animation wait for my next post). This is the second post to my “HTML5 <Canvas>” series. In previous post we saw how
<Canvas>'s
context gives us an API with set of
methods and properties to draw on its surface, now in this post we will use some of those methods to draw a logo of one of my favorite game PORTAL2. Above is the actual completed art drawn on canvas, and below we will see how we draw that art piece by piece. And Let me tell you this article is just for introducing you to the use of various methods provided by canvas and may not show the best and efficient way of drawing on it. So keeping that in mind, let’s get started.
First things first
As you may know by now that before any drawing we need to have a handle on<Canvas> element to do manipulations, and that handle is the context object of the <Canvas>. The
context of the <Canvas> element provides us all that API of methods to do drawing and manipulation on <Canvas>context we use "getContext()” method and pass in the string “2d” as parameter * . Also since we feel more natural using “degrees” for specifying angles but all functions of canvas context take clockwise “radians” as parameter, we’ll use following function to convert degree into anticlockwise* radians. Also note that it is recommended to use "save()” and “restore()” methods of context to save the current state of the context on the stack before any manipulation & transformation and restore it back to its previous state respectively.*(for details check my previous post or w3c draft)
//context of the canvas
var ctx = document.getElementById("portalcanvas").getContext("2d");
//function to convert radians to degrees
var acDegToRad = function(deg){
return deg* (-(Math.PI / 180.0));
}
Drawing the “2”
We’ll start by drawing the number “2” on the<Canvas>. It consists of 3 pieces the base rectangle, a slant rectangle and an arc.-
2’s Base: The base rectangle is the easiest of all to draw, just set the
“
fillStyle” property of thecontextto light gray color and use “fillRect( x, y, width, height)” method to draw the rectangle.
ctx.save(); ctx.fillStyle = "rgb(110,110,110)"; ctx.fillRect(20,200,120,35); ctx.restore();
If we want we could also draw above rectangle as a small horizontal line with line-width equal to the height of the above rectangle. But that would involve more steps like creating a path and then drawing the line along the path, which is more complicated for this primitive shape.
-
2’s Slant: The slant rectangle is just a simple rectangle but elevated to an angle of 35 Degrees. So to create a slant rectangle first we will translate the origin of the coordinate space (i.e., the transformation matrix) to the top edge of 2’s base rectangle using “
translate( newX, newY)” and then rotate the coordinate space by 35 degrees in anti-clockwise direction, taking new origin as the pivot/center, by using the “rotate(radians)” method and then simply draw the rectangle usingfillRect( x, y, width, height).
ctx.save(); ctx.fillStyle = "rgb(110,110,110)"; ctx.translate(20,200); ctx.rotate(acDegToRad(35)); ctx.fillRect(0,0,100,35); ctx.restore();
Also note that how we have usedsave()before any manipulation and then usedrestore()after drawing, this makes sure that the translation and rotation of coordinate space does not affect rest of drawings we are about do later on. This waycontextstate of the canvas always remains in previous state, in this case, the Initial state. Remembersave()andrestore()doesn’t save/restore the contents on the canvas, it just save/restore the state of properties/attributes like “fillStyle”, “strokeStyle”, “lineWidth”, etc and coordinate space on the<Canvas>drawing context.
-
2’s Arc: The top arc of number “2” cannot be drawn by rectangle methods but can be simply drawn like a line arc whose line-width is equal to the height of previous rectangles. For creating any line shape we first start a path by calling “
beginPath()” method, then call any shape method like “rect()”, “arc()”, “lineTo()”, etc to add them to path and then optionally call “closePath()” method to complete the path and start new one. For this step we will start a new path and add an arc to the path by using “arc(x,y,radius, startAngle, endAngle)” method. So far we have only created the path, to actually draw the arc on canvas we will call “stroke()” method. But since stroke will draw with default color, so before calling “stroke()“ we will set “strokeStyle” property ofcontextto light gray.
ctx.save(); ctx.lineWidth = 35; ctx.beginPath(); ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true); ctx.strokeStyle = "rgb(110,110,110)"; ctx.stroke(); ctx.restore();
Drawing the “blue guy”
The next thing to be drawn is that blue guy coming out of the wall. This art consists of a wall, blue guy’s head, his tummy and then this hand & legs.-
Wall: The wall is the just a simple slim and tall blue rectangle.
ctx.save(); ctx.fillStyle = "rgb(0,160,212)"; ctx.fillRect(162,20,8,300); ctx.restore();
-
Head: The blue guy’s head is also a simple circle, but since we not have a direct method like
“fillCircle()”, we’ll need to use a similar trick as we did for “2’s” arc. We will start a new path, add a full 360 degree arc and fill it with color. For filling we will use “fill()” method accompanied by “fillStyle” property set to light blue color, to fill the path with blue color thereby creating a filled circle.
ctx.save(); ctx.fillStyle = "rgba(256,256,256,0.75)"; ctx.fillRect(0,0,300,350); ctx.fillStyle = "rgb(0,160,212)"; ctx.beginPath(); ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360)); ctx.fill(); ctx.restore();
A thing to note here is that when you create a path you have two options, either to call “stroke()” method to draw that path using current “strokeStyle”, as we did earlier and will do for hand and legs, or to call “fill()”method to fill the path with current “fillStyle”, as we did just now for head and will do for tummy. We also have an option of calling “clip()” method (discussed later).
-
Tummy: The tummy of the blue guy is also drawn by creating a triangle path and filling the triangle with blue color. To create the triangle path we first start a new path, move the initial drawing point from origin or any last position (lets it be O) to a point on the wall below the head using “moveTo(x, y)” method which moves the drawing point from current draw point to a new point (let it be A) without adding the line between O & A to the path, then use “lineTo( x, y)” method which moves the drawing point to a new point (let it be B) and also adds the line between A & B to the path. Similarly add the third point (let it be C) to complete the three points of the triangle. This will also add the line between B & C to the path. Now optionally you can use “lineTo( x, y)” method to go back to point A and add line between C & A to the path and thus closing the path but by default the “fill()” will automatically assume a line between opening and closing points and will fill the enclosed area.
ctx.save(); ctx.fillStyle = "rgb(0,160,212)"; ctx.beginPath(); ctx.moveTo(170,90); //point A ctx.lineTo(230,140); //point B ctx.lineTo(170,210); //point C ctx.fill(); //fill area between ABC ctx.restore();
-
Hand: For hand we will simply create two lines as we did above. A to B for shoulder to elbow and B to C for forearm. But by default the line is 1px wide first we will set “lineWidth” property of
contextto 25px, then since line’s ends and joints (at B) are rectangular by default, we will set both “lineCap” property, for line ends and “lineJoin” property to “round”. And since we want lines to be drawn instead of filling the space between, we will call “stroke()” method of context.
ctx.save(); ctx.lineWidth = 25; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.strokeStyle = "rgb(0,160,212)"; ctx.beginPath(); ctx.moveTo(222,150); //point A ctx.lineTo(230,190); //point B ctx.lineTo(270,220); //point C ctx.stroke(); ctx.restore();
-
Leg: The leg can be drawn exactly as we drew the hand so code will be much same as above except for the coordinates.
ctx.save(); ctx.lineWidth = 25; ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.strokeStyle = "rgb(0,160,212)"; ctx.moveTo(160,210); //point A ctx.lineTo(195,260); //point B ctx.lineTo(160,290); //point C ctx.stroke(); ctx.restore();
But there is a problem with above code, the result leg doesn’t look like what we want. Part of the leg is hidden in the wall, so we need to clip the extra piece of leg from the drawing.
-
Clip Leg: With above code we didn’t got what we wanted but fret not, “clip()” method comes to rescue. Clip is similar to fill method but instead of filling the area enclosed by the path with some color, it creates an enclosed invisible boundary (outline of triangle is drawn in figure only to highlight the clip area) where any drawing on it clipped if it does not lie in the clipping region and only the drawing lying in the clipping region is shown. So to clip legs protruding through the wall, we’ll first create a clipping region by creating a triangular path with one of its side coinciding with the wall and then draw the leg same as we drew the hand.
ctx.save(); //code for drawing clipping region ctx.beginPath(); ctx.moveTo(170,200); //point A ctx.lineTo(250,260); //point B ctx.lineTo(170,320); //point C ctx.lineTo(170,200); //back to point A to close the path ctx.clip(); //set the above path for clipping region //code for drawing leg ctx.lineWidth = 25; ctx.lineCap = "round"; ctx.strokeStyle = "rgb(0,160,212)"; ctx.lineJoin = "round"; ctx.beginPath(); ctx.moveTo(160,210); ctx.lineTo(195,260); ctx.lineTo(160,290); ctx.stroke(); ctx.restore();
<Canvas> elements) accompanied by complete combined code I used to draw it. So I hope that you liked this article and stay tuned for my next post where I will discuss 2D animation on <Canvas>.(function(){
var ctx = document.getElementById("portalcanvas").getContext("2d");
//function to convert deg to radian
var acDegToRad = function(deg){
return deg* (-(Math.PI / 180.0));
}
//save the initial state of the context
ctx.save();
//set fill color to gray
ctx.fillStyle = "rgb(110,110,110)";
//save the current state with fillcolor
ctx.save();
//draw 2's base rectangle
ctx.fillRect(20,200,120,35);
//bring origin to 2's base
ctx.translate(20,200);
//rotate the canvas 35 deg anti-clockwise
ctx.rotate(acDegToRad(35));
//draw 2's slant rectangle
ctx.fillRect(0,0,100,35);
//restore the canvas to reset transforms
ctx.restore();
//set stroke color width and draw the 2's top semi circle
ctx.strokeStyle = "rgb(110,110,110)";
ctx.lineWidth = 35;
ctx.beginPath();
ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true);
ctx.stroke();
//reset canvas transforms
ctx.restore();
//change color to blue
ctx.fillStyle = "rgb(0,160,212)";
//save current state of canvas
ctx.save();
//draw long dividing rectangle
ctx.fillRect(162,20,8,300);
//draw player head circle
ctx.beginPath();
ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));
ctx.fill();
//start new path for tummy :)
ctx.beginPath();
ctx.moveTo(170,90);
ctx.lineTo(230,140);
ctx.lineTo(170,210);
ctx.fill();
//start new path for hand
//set lineCap and lineJoin to "round", blue color
//for stroke, and width of 25px
ctx.lineWidth = 25;
ctx.lineCap = "round";
ctx.strokeStyle = "rgb(0,160,212)";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(222,150);
ctx.lineTo(230,190);
ctx.lineTo(270,220);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(170, 200);
ctx.lineTo(250, 260);
ctx.lineTo(170,320);
ctx.clip();
//begin new path for drawing leg
ctx.beginPath();
ctx.moveTo(160,210);
ctx.lineTo(195,260);
ctx.lineTo(160,290);
ctx.stroke();
//restore the context back to its initial state
ctx.restore();
})()
