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:
fig 1
So today we will start with some design created using lines on the third canvas.
- Creating design using lines:
- Open the “canvas.js” file which is in the “Canvas” folder on the desktop.
- Write the following code in the “makeCanvas()” function, below the code for rectangle design.
- 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:
- 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:
- Creating design using circles:
- 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:
Follow the steps:
////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:
The figure in the above output is not filled with colour, but we have defined a property of “fillStyle” to it.
We will be creating 3 circles of different colours one below the other on the fourth canvas.
////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:
y = y co-ordinate
r = radius of the circle
start = starting angle of the circle
stop = end angle of the circle.
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.
//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();
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:
- 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:
Here we finished the graphics on canvas element with javascript.