Canvas and Event handling in javascript- A must learn for web app developers

Let everyone know that you\'re techy!!!

FacebookRedditEmail this page


we will learn something about the canvas tag.

as i said earlier, i will teach new concepts on the way, so i am going to teach this concept before i make the pong game in javascript.

so, let’s start.

at first, we will draw the empty canvas.

we can do it as.

this source code,when saved as pongerror.html will lead a blank page.

and then we will create a border.

to create a border we need to define a style as border, and the nature of line as solid…with color gray(color code-#d3d3d3).

the color codes are here  https://htmlcolorcodes.com/

after that, the new code will be as follows.

its output will be as follows.

so, after that, we will create a diagonal line. the code used is as follows.

whose output will come as follows.

now, let’s move furthur and create a circle in javascript using canvas.

in circle, we create an arc and rotate it 360 degrees.

ctx.beginPath will be created. and ctx.arc(center,radius,rotate 2pi); and to write 2*pi. use 2*Math.PI.

thats it. lets see the full code.

its output will be seen as follows.

we needed to specify 2 centers and radius because we are joining 2 arcs and making a circle in this case.

suppose, we need to add some WordArt text then we will use the following code.

its output will come as follows.

now, let’s see about event handling

now, before beginning let me talk a little bit about the event handling…event means, user presses keys, or clicks mouses etc.

we want to run any functions as soon as the javascript events occur.

so, we will be binding function with events.

for eg-: user presses a button, then we want to move it to right. so, we have to bind that button with the right() function.

the various types of events in javasscript are as follows.

  1. onmousedown
  2. onmouseclick
  3. onmouseover
  4. onmouseup
  5. etc etc and so on.

so, let’s write a program where the paragraph will turn blue when we take our mouse over it.

i.e

 

its output will come as follows.

so, that much till now, i will be updating this page often more….till it is published….because i need to fill this blog post with all the things(basics) that are required to be a web application developer.

stay conscious!

Share this and have a good day!

Facebook

Be the first to comment

Leave a Reply

Your email address will not be published.


*