Adv - C83

ADV-C83
CANVAS - TOUCH EVENTS
What was our GOAL for this MODULE?

We went deeper into the concept of event handling. We learned touch events to make the
projects touch screen compatible. This gave a big boost to our creator confidence.
What did we ACHIEVE in the class TODAY?

● Built a mobile-friendly paint web app.
● Learned about different touch events.
● Tracked the x and y coordinates of the finger touch.
● Learned JS predefined functions such as moveTo() and lineTo().
Which CONCEPTS/ CODING did we cover today?

● Inspect element window
● Change of height and width of canvas
● MouseEvent - mouseUp and mouseLeave
● Add eventListener to the canvas
● Touchmove event
© 2019 The content of this email is confidential and intended for the recipient specified in message only. It is strictly forbidden to
share any part of this message with any third party without a written consent of the sender. If you received this message by mistake,
please reply to this message and follow with its deletion, so that we can ensure such a mistake does not occur in the future.
ADV-C83
How did we DO the activities?
The following steps are for testing how the canvas would behave when it is in mobile.
1. We right clicked on the screen and clicked on the Inspect option.
2. We clicked on the mobile/tab icon (Highlighted in the image below):
ADV-C83
● This would get the website to a mobile screen view, like this:
ADV-C83
3. Refresh. We noticed that the canvas resized itself as per the screen size.
ADV-C83
4. When we moved the mouse inside the website, the mouse cursor changed to the
below image (See the highlighted part):
● This icon would act as if your finger is moving on the screen. So when we
coded and tested, we used this as our finger on screen.
ADV-C83
5. We clicked inside the canvas and left it there. We saw a message on the console
screen - my_touchstart. That meant the touch functionality was working.
6. We clicked and moved the mouse inside the canvas and it started painting. This
mouse click and moving the mouse meant - touching on the mobile screen and
moving the finger.
ADV-C83
7. We saw a message on the console screen - my_touchmove and the last and current
x and y and coordinates,
ADV-C83
8. We reduced the width on the website as shown in the image:
9. We refreshed the page, and saw that the canvas resized itself again as per the
screen size.
ADV-C83
So we followed the above steps when we wrote and tested the code.
ADV-C83
We saw in the main.js file that we had the old code which was done in the previous class
which was for the web paint application for desktop.
Now we converted this code and made it fully-functional, so that we can use it on mobiles.
1. First, we removed the variable mouseEvent, because we didn’t require it.
2. The variables which we used to store the last x and y coordinates remained the
same.
3. The reference for the canvas, the variable holding the color, and the variable holding
the width would be the same as well.
4. We fetched the width of the screen and stored it inside the variable. We did this
because we wanted to know which screen size (mobile or pc) the user is using.
5. We defined a variable new_width:

● This variable stored the new width which was obtained by subtracting
screen.width of 70 from the user’s screen width.
○ This 70 means 70px.
ADV-C83
6. We defined a variable new_height:

● This variable stored the new height which was obtained by subtracting the
screen.height of 300 from the user’s screen height.
○ This 300 means 300px.
As we learned in bootstrap that the screen width was divided into basic 5 sections:
● Screen width 1200px and more: The big screens: These are for laptops and desktops.
● Screen width between 1200px and 992px: These are for laptops.
● Screen width between 992px and 768px: These are for tablets.
● Screen width less than 768px: These are for mobiles.
We have built this paint application so that users can use this in tablets and mobiles. For
that, we needed to reduce the width and height of the canvas as per the screen of the user
and we wanted this to be applied only to the tablet and mobile screens.
● We wrote an if condition:
○ If the screen size is less than 992 (means 992px), then we changed the width
and height of the canvas with the new width and new height which we had
defined in the above points.
The width of the screen is less than 992px.

So it came inside the if condition and it set the canvas width = new_width //
width which is 730px
set the canvas height = new_height // height which is 400px
ADV-C83
● The new width and new height of the canvas was 730px and 400px
respectively, so as a result, automatically, our canvas fitted inside the
screen.
● Whenever you reduce or increase the width of the screen (provided it's
less than 992px), the canvas will be resized according to the width of
the screen.
7. Then, we updated the style of the body with a CSS property which was
overflow:hidden. This style disabled the scrolling of the page. It was done so that the
painting on the canvas was done very smoothly.
● Syntax:
○ document: the HTML document
○ body: body tag
○ style: We are adding style to the body tag.
○ overflow: This is the CSS property.
○ hidden: This is the value for the property.
ADV-C83
8. We used two touch events:

01. touchstart event: It has the same as a mousedown event, so when we touch
the screen, this event should be executed.
➔ So we replaced the mousedown event listener with the touchstart event

listener.
○ Old code:
○ Updated Code: This code called the my_touchstart function when we

touched the screen.
➔ We replaced the my_mousedown function name with my_touchstart.
○ Old code:
○ Updated code:
➔ Now we added console.log(“my_touchstart”) inside the function, so that

when we touch the screen, we get my_touchstart on the console screen. So
we became sure that the function would get executed.
ADV-C83
//additional activity ends.
➔ We removed the following code, because we didn’t want to track the mouse
events.
➔ We fetched the current x coordinates on the canvas. We touched and stored it

inside the variable last_position_of_x_touch.
○ e indicates the event.

○ touches[0]: This means that it will only show the
coordinates of one finger.
○ clientX: This will give the x coordinate.
As a result:
○ e.touches[0].clientX: Gave the x coordinate where we
touch on the canvas.
As the canvas can be placed anywhere on the screen
and by just using e.touches[0].clientX, it won’t give the
actual x coordinate on the canvas.
○ So to get the actual x coordinate on canvas with respect
to the screen, we do: e.touches[0].clientX -
canvas.offsetLeft.
● So after getting the x coordinate, we stored it in variable
ADV-C83
last_position_of_x_touch.
● Then we fetched the current y coordinates on the canvas. We touched

and stored it inside the variable last_position_of_y_touch.
○ e indicates the event.

○ touches[0]: This means that it will only show the
coordinates of one finger.
○ clientY: This will give the y coordinate.
As a result:
○ e.touches[0].clientY: This will give the y coordinate
where we touch on the canvas.
As the canvas can be placed anywhere on the screen
and by just using e.touches[0].clientY, it won’t give the
actual y coordinate on the canvas.
○ So to get the actual y coordinate on canvas with respect
to the screen, we do: e.touches[0].clientY -
canvas.offsetTop.
● So after getting the y coordinate, we would store it in variable

last_position_of_y_touch.
● We put the current x and y coordinates in the

last_position_of_x_touch and last_position_of_y_touch, because we
wanted to start drawing from the position of the touch.
○ So when we moved our finger, the position where we touched
became the last position. So we stored it inside
last_position_of_x_touch and last_position_of_y_touch.
02. touchmove event: The touchmove event is the same as a mousemove event.
When we move our finger on the screen, this event should be executed.
➔ We replaced the mousemove event listener with the touchmove event

listener.
○ Old code:
ADV-C83
○ Updated Code: This code would call my_touchmove function when we

move our finger on the screen.
➔ We replaced the my_mousemove function with my_touchmove.
○ Old code:
○ Updated code:
➔ We added console.log(“my_touchmove”) inside the function, so that when we

move our finger on the screen, we get my_touchmove on the console screen.
➔ We removed the below code because we wanted to store the current x and y
coordinates of the touch and not of the mouse.
➔ We fetched the current x coordinates on the canvas where we moved our

finger and stored it inside the variable current_position_of_touch_x.
ADV-C83
➔ We fetched the current y coordinate on the canvas where we moved our

finger and stored it inside the variable current_position_of_touch_y.
➔ We removed the if condition that checks if mouseEvent == “mouseDown”.

We removed this because we did not track any mouse events and we just
wanted to draw when we moved the finger on the screen.
○ The code which was inside the if condition almost remained the same.
○ We only needed to change:
○ all the current_position_of_mouse_x to
current_position_of_touch_x
○ all the current_position_of_mouse_y to
current_position_of_touch_y
ADV-C83
The remaining code remained the same because the logic of drawing
remained the same. Refer to the code below:
○ beginPath(): This begins a path, or resets the current path for drawing
anything. It tells the canvas to start drawing the shape/object.
○ strokeStyle: This sets the color of the drawing.
■ We had to set the value to variable color and variable color has
black color, so the drawing will be of the black color.
○ lineWidth: This sets the width for the drawing.
■ We had set the value of the variable width_of_line to 2, so the
width of the drawing will be 2.
● We passed last_position_of_x and last_position_of_y inside the

moveTo function, because when we moved our finger on the screen
from one coordinate (let’s keep this coordinate as old_coordinates) to
another coordinate (let’s keep this coordinate as new_coordinates),
we wanted the drawing to be placed between the old_coordinates
and the new_coordinates.
● So when we pass the last x and y coordinate to the moveTo function,

the creation of the line should start from these coordinates.
● We had passed this current_position_of_touch_x and

current_position_of_touch_y inside the lineTo function, because when
we kept moving our finger, the drawing should keep happening till
these new coordinates.
● We passed the current x and y coordinate to lineTo, this meant that the
creation of the line should end on these coordinates.
What’s NEXT?
ADV-C83
We will learn how to add components on the canvas.
EXTEND YOUR KNOWLEDGE
Here are some Best References we’ve compiled together to enhance your knowledge and
understanding of the concepts we learned today in the class. This will help you become a
pro at coding and creating industry-grade tech products!
Short Videos: Watch these Short Videos to understand the application of the concepts
learned in class in real-world applications.
1. https://www.youtube.com/watch?v=JoQEBOXdfNc
2. https://www.youtube.com/watch?v=voopDNDhrIE
3. https://www.youtube.com/watch?v=ga_SLzsUdTY
ADV-C83
Coding Playground: Try out these code examples to get more practice in making Websites
and Playstore ready apps.
1. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_sha
pes
2. https://www.w3schools.com/tags/canvas_createlineargradient.asp
3. https://www.w3schools.com/tags/canvas_drawimage.asp
ADV-C83

Adv - C83

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Adv - C83

Transféré par

Droits d'auteur :

Formats disponibles

ADV-C83

CANVAS - TOUCH EVENTS

What was our GOAL for this MODULE?

What did we ACHIEVE in the class TODAY?

Which CONCEPTS/ CODING did we cover today?

How did we DO the activities?

1. We right clicked on the screen and clicked on the Inspect option.

2. We clicked on the mobile/tab icon (Highlighted in the image below):

8. We reduced the width on the website as shown in the image:

1. First, we removed the variable mouseEvent, because we didn’t require it.

5. We defined a variable new_width:

6. We defined a variable new_height:

The width of the screen is less than 992px.

set the canvas height = new_height // height which is 400px

8. We used two touch events:

➔ So we replaced the mousedown event listener with the touchstart event

○ Updated Code: This code called the my_touchstart function when we

➔ We replaced the my_mousedown function name with my_touchstart.

➔ Now we added console.log(“my_touchstart”) inside the function, so that

//additional activity ends.

➔ We fetched the current x coordinates on the canvas. We touched and stored it

○ e indicates the event.

● So after getting the x coordinate, we stored it in variable

● Then we fetched the current y coordinates on the canvas. We touched

○ e indicates the event.

● So after getting the y coordinate, we would store it in variable

● We put the current x and y coordinates in the

➔ We replaced the mousemove event listener with the touchmove event

○ Updated Code: This code would call my_touchmove function when we

➔ We replaced the my_mousemove function with my_touchmove.

➔ We added console.log(“my_touchmove”) inside the function, so that when we

➔ We fetched the current x coordinates on the canvas where we moved our

➔ We fetched the current y coordinate on the canvas where we moved our

➔ We removed the if condition that checks if mouseEvent == “mouseDown”.

● We passed last_position_of_x and last_position_of_y inside the

● So when we pass the last x and y coordinate to the moveTo function,

● We had passed this current_position_of_touch_x and

We will learn how to add components on the canvas.

EXTEND YOUR KNOWLEDGE

Vous aimerez peut-être aussi