HTML 5 TutorialsHTML Graphics - Part 3

HTML Graphics – Part 3

We finished drawing text and squares on the canvas last time. Today we will continue further with lines, circles and animation.
Output of work done last time is given below:
final_output_of_rectangles
fig 1

So today we will start with some design created using lines on the third canvas.

  • Creating design using lines:
  • Follow the steps:

    1. Open the “canvas.js” file which is in the “Canvas” folder on the desktop.
    2. Write the following code in the “makeCanvas()” function, below the code for rectangle design.
    3. ////Third Canvas - Lines////
      	
      		//1 - Get Object
      		var canvas3=document.getElementById("canvas3");
      		var ctx3=canvas3.getContext('2d');
      		
      		//2 - Set Properties
      		ctx3.strokeStyle="#666666";
      		ctx3.fillStyle="#ff0000";
      		ctx3.lineWidth=5;
      		
      		//Start drawing
      		
      		ctx3.beginPath();
      		ctx3.moveTo(100,100);
      		ctx3.lineTo(150,200);
      		ctx3.lineTo(200,200);
      		ctx3.lineTo(200,290);
      		ctx3.lineTo(290,290);
      		ctx3.lineTo(290,100);
      		ctx3.lineTo(100,100);
      		ctx3.stroke();
      		ctx3.fill();
      		ctx3.closePath();
      

      Explanation of the above code:

      • As we know every graphics need 3 steps i) Getting object ii) setting properties and iii) action – drawing shapes.
        We have started with getting the object “canvas3” i.e. the third canvas in the “index.html”. It is identified by its id “canvas3”.
      • After getting the context of canvas3, we have set its properties such as grey colour for border, red colour to fill the closed figure and 5 pixel border width.
      • We had learned all this in previous session. Now let’s learn how to draw a figure by joining lines.
      • The first line in drawing lines code, ctx3.beginPath(); allows us to start drawing i.e. it will allow us to start drawing lines from where we want.
      • The next line ctx3.moveTo(100,100); contains the inbuilt function moveTo(x,y). This function moves the pointer without drawing lines to the position specified by the x and y co-ordinates, considering the top-left corner of the canvas with (0,0) co-ordinates.
      • The next line ctx3.lineTo(150,200); draws a line from its current position to the position specified in lineTo(x,y) function.
      • The lines are drawn one by one as long as lineTo(x,y) function is used.
      • After drawing lines ctx3.stroke(); is used to give a grey coloured border to the figure formed.
      • The output only with drawn lines is shown below:
      • only_lined_figure_output
        fig 2

        The figure in the above output is not filled with colour, but we have defined a property of “fillStyle” to it.

      • To apply this property of “fillStyle” to the figure, we have used the statement ctx3.fill();. This will fill the figure with red colour.
      • Next to close the figure that we had started with ctx3.beginPath(); the statement ctx3.closePath(); is used.
      • The output of the coloured figure is shown below:
      • lined_figure_output_with_colour
        fig 3

  • Creating design using circles:
  • We will be creating 3 circles of different colours one below the other on the fourth canvas.

    • First let’s see how to create one circle, rest of them have the same method.
    • For fourth canvas we need to get the canvas4 object first and then draw the circle. The code is as follows:
    • ////Fourth Canvas - Circles////
      		
      //First Circle
      //1 - Get Object
      var canvas4=document.getElementById("canvas4");
      var ctx4=canvas4.getContext('2d');
      		
      //2 - Set Properties
      ctx4.fillStyle="blue";
      		
      //3 - Draw Circle
      ctx4.beginPath();
      ctx4.arc(200,30,25,0,Math.PI*2);
      ctx4.fill();
      ctx4.closePath();
      

      Explanation of the above code:

    • Here in the above code, “canvas4” is selected as object and its context is stored in the variable “ctx4”.
    • A “fillStyle” property is set to “blue” colour.
    • For drawing a circle, the function used is arc(x,y,r,start,stop) where x = x co-ordinate
      y = y co-ordinate
      r = radius of the circle
      start = starting angle of the circle
      stop = end angle of the circle.
    • In the above code, we have used ctx4.beginPath(); statement to start the drawing process.
    • Next we have used “arc” function in the statement ctx4.arc(200,30,25,0,Math.PI*2);. We have seen its syntax above. A circle of radius 25 pixels will be drawn at a position (200,30). The start angle of the arc is “0” degrees and the end angle is calculated wth “Math.PI*2” so as to complete the circle.
    • The statement ctx4.fill(); will apply “blue” colour to the circle.
    • The statement ctx4.closePath(); will close the path as explained above for lines.
    • The output of first circle is shown below:
    • first_circle_output_on_canvas4
      fig 4

    • Rest two circles are to be drawn in the same way.
    • You can create a variable with any name say “PI_2” to store the value “Math.PI*2” instead of writing it every time.
    • Just write the statement
      var PI_2=Math.PI*2; 

      as the first line of the makeCanvas() function and replace the “Math.PI*2” with “PI_2” wherever used.

    • Code for them is shown below:
    • //Second Circle
      		
      		//2 - Set Properties
      		ctx4.fillStyle="red";
      		
      		//3 - Draw Circle
      		ctx4.beginPath();
      		ctx4.arc(200,100,45,0, PI_2);
      		ctx4.fill();
      		ctx4.closePath();
      		
      		//Third Circle
      		
      		//2 - Set Properties
      		ctx4.fillStyle="black";
      		
      		//3 - Draw Circle
      		ctx4.beginPath();
      		ctx4.arc(200,220,75,0, PI_2);
      		ctx4.fill();
      		ctx4.closePath();
      
    • The code for the 2 circles is same as the first one except the co-rdinates.
    • The output with the full circle design is shown below.
    • full_circle_design_output
      fig 5

  • Creating an Animation:
  • Now we will do some fun by making an animation. What we will do is, make the background of canvas5 black and place 3 balls of white, red and blue colour that will move on the canvas.

    Code for the animation is given below:

    ////Fifth Canvas - Animation ////
    		
    		var canvas5=document.getElementById("canvas5");
    		var ctx5=canvas5.getContext('2d');
    		
    		var posX=0;
    		var posY=0;
    		
    		setInterval(function(){
    		 posX+=1;
    		 posY+=1;
    		ctx5.fillStyle="black";
    		ctx5.fillRect(0,0,canvas5.width,canvas5.height);
    		
    		ctx5.fillStyle="white";
    		ctx5.beginPath();
    		ctx5.arc(posX,120,55,0,Math.PI*2);
    		ctx5.fill();
    		ctx5.closePath();
    		
    		ctx5.fillStyle="red";
    		ctx5.beginPath();
    		ctx5.arc(150,posY,78,0,Math.PI*2);
    		ctx5.fill();
    		ctx5.closePath();
    		
    		ctx5.fillStyle="blue";
    		ctx5.beginPath();
    		ctx5.arc(350,posY,38,0,Math.PI*2);
    		ctx5.fill();
    		ctx5.closePath();
    		},30);
    

    Explanation of the above code:

    • Here, we got the object “canvas5” and its context in variable “ctx5”. “canvas5” is defined in “index.html” file.
    • Two variables “posX” and “posY” are defined and a value “0” is assigned to both of them.
    • These variables are used as counters which will help the balls to move i.e. the “x” or “y” position of the balls is changed by 1 unit.
    • A function setInterval(); is used for the animation process.
    • setInterval(); function consists of two parameters, one is a function and another is a delay given to the moving objects.
    • Inside the function in setInrval(), “posX” and “posY” variables value is increased by “1” unit.
    • Next, a rectangle having black colour is drawn such that it will spread on the whole canvas.
    • It’s output is shown below:
    • black_rectabgle_on_canvas5
      fig 6

    • Here, ctx5.fillRect(0,0,canvas5.width,canvas5.height); statement draws the rectangle, but the position of rectangle on the canvas is given (0,0). And you will see that the rectangle has been drawn by leaving some space on all the 4 sides of the canvas. This is because, in “index.html” page where the canvas is defined, a padding of 10 pixels is given to the canvas. That means, anything can be drawn leaving a space of 10 pixels from inner sides of the canvas.
    • After the rectangle 3 circles are drawn with white, red and blue colour respectively.
    • In the above code you will notice that, the arc for white coloured circle and blue coloured circle consists of “posX” variable in place of “x” co-ordinate. These circles will move horizontally i.e. its x – coordinate will change by 1 pixels continuously.
    • Same way, the arc for red colour circle consists of “posY” variable in place of “y” co-ordinate. This circle will move vertically i.e. its y – coordinate will change by 1 pixels continuously.
    • The other parameter “30” of setInterval() function is used to apply delay to the movement of the circles. Otherwise, the circles will move and disappear very fast.
    • The output of animation is shown below:
    • final_output_of_animation
      fig 7

      Here we finished the graphics on canvas element with javascript.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -