HTML5 Canvas Element – Part 2

0
6470
HTML5 Canvas Element

Last time we learned how to draw a text on the HTML5 canvas element using javascript. Today we will create a design of rectangles on the second canvas.
Let’s first see the output of the text created in last session.

strokeText_output
fig 1

This text was drawn on the first canvas.
Let’s go to the second canvas. The design that we will draw will be somewhat like shown in the figure 2 below:

final_output_of_rectangles
fig 2

Now let’s create the design in canvas2 step by step.

  1. Open the “canvas.js” file which is in the “Canvas” folder on desktop.
  2. Write the following code in the “makeCanvas()” function, below the code for the text “I love HTML5”.
  3. ////Second Canvas - Squares ////
    	
    	//Top Left Rectangle
    	
    	//1 - Get Object
    	var canvas2=document.getElementById("canvas2");
    	var ctx2=canvas2.getContext('2d');
    	
    	//2 - Set Properties
    	ctx2.fillStyle="#FF0000";
    	ctx2.strokeStyle="#000000";
    	ctx2.lineWidth=10;
    	
    	//3 - draw square
    	ctx2.fillRect(45,5,135,135);
    	ctx2.strokeRect(45,5,135,135);
    

    Explanation of above code:
    This code draws the top left square as shown in figure 2 above.

    • Firstly using the code
      //1 - Get Object
      	var canvas2=document.getElementById("canvas2");
      	var ctx2=canvas2.getContext('2d');

      we get the object, “canvas2” and it’s context.

    • Secondly we set some properties for the shape using the following code:
      //2 - Set Properties
      	ctx2.fillStyle="#FF0000";
      	ctx2.strokeStyle="#000000";
      	ctx2.lineWidth=10;
    • Here, ctx2.fillStyle=”#FF0000″; fills the square with red colour.ctx2.strokeStyle=”#000000″; gives a border of black colour to the red square. And ctx2.lineWidth=10; gives a width of 10 pixels to the black border.
    • After setting the properties the third step is to draw the square. Code for it is as follows:
      //3 - draw square
      	ctx2.fillRect(45,5,135,135);
      	ctx2.strokeRect(45,5,135,135);
    • Here, fillRect() is the inbuilt function to draw a rectangle. Parameters of fillRect() function consist of x and y positioning co-ordinates and width and height of the rectangle respectively. When width and height is same, it will form a square.
    • The output till fillRect() function is shown below:
    • top_left_square_without_stroke
      fig 3

    • Now, when you write the further line of code i.e.
      ctx2.strokeRect(45,5,135,135);

      the output will look as shown below:

    • top_left_square_with_stroke
      fig 4

    • Here, strokeRect() function has same parameters as the fillRect() function and it gives a black colour border to the red coloured square. The border is black because of the “strokeStyle” property and it gets it’s width from the “lineWidth” property.If you increase the value of the “lineWidth” property, its width will increase overriding the red square.
  4. Now, let’s move to the top right square. Code for it is shown below:
  5. //Top Right Rectangle(no stroke)
    	
    	//2 - Set Properties
    	ctx2.fillStyle="#666666";
    	
    	//3 - draw square
    	ctx2.fillRect(200,0,135,135);
    

    Explanation of the above code:

    • The square we had drawn first had “red” colour, but the square next to it has “grey” colour. So we need to again set the property of “grey” colour for this square.
    • The “grey” colour is set using “fillStyle” property.
    • This “grey” coloured square has no border, so no stroke is needed.
    • The square is drawn using “fillRect()” function with x co-ordinate as 200 pixels, y co-ordinate as 0 pixels and width and height as 135 pixels.
    • The output is shown below:
    • top_right_square_output
      fig 5

  6. Next, you can see a one more grey coloured square below the red coloured square in figure 2.
    You can draw it using fillRect() function as before with required parameters. The code is shown below:
  7. //Bottom Left Rectangle (no stroke)
    	
    	//3 draw square
    	ctx2.fillRect(45,150,135,135);
    
    
    • Here, there is no need to set the “fillStyle” property for “grey” colour, because it is already set during the previous square.
    • We need to only draw the square with function fillRect() having parameters 45 and 150 as x and y co-ordinates and 135 and 135 as width and height respectively.
    • The output is shown below:
    • bottom_left_square_output
      fig 6

  8. Now a last square which is same as that of the first one is remaining. Repeat the code for the first square only with different x and y co-ordinates in fillRect() and strokeRect() functions as shown below:
  9. //Bottom Right Rectangle
    	
    	//2 - Set Properties
    	ctx2.fillStyle="#FF0000";
    	ctx2.strokeStyle="#000000";
    	ctx2.lineWidth=10;
    	
    	//3 - draw square
    	ctx2.fillRect(200,150,135,135);
    	ctx2.strokeRect(200,150,135,135);
    

    The output is shown below:final_output_of_rectangles
    fig 7

    Here we finished with our square design. In the next session we will learn to draw lines and join them to make any figure out of it.

LEAVE A REPLY

Please enter your comment!
Please enter your name here