What is wrong in my code ! (Canvas[Help])[Solved]

Question

Here is a sample code...I want that to act as a paint app,but my code doesn't work so please explain me the solution for this

https://code.sololearn.com/WVlMYsunTnTH/?ref=app

Answer 1

Oh OK

Answer 2

Wait

Answer 3

Dark Stream

I already gave you a solution then why this question again

https://code.sololearn.com/WmH1uBQRgjIV/?ref=app

https://www.sololearn.com/Discuss/2720987/?ref=app

Answer 4

https://code.sololearn.com/WlHr5XU6CLwY/?ref=app

Answer 5

𝕂𝕒𝕪 That is not what I needed 😔

Answer 6

Dark Stream

Oh! You want painting app right

Answer 7

Yes......

Answer 8

I will send you after some time

Answer 9

Ok,now I have edited that code as a easy way for u all to understand

Answer 10

I have re edited the code,as for easier understanding....what I want is to it act as a paint app...but it doesn't work....so I want the solution for it😇

Answer 11

What do you want?

Answer 12

Dark Stream

Ok.

Answer 13

Dark Stream

Do you want like that we do painting?

Answer 14

Oh OK ☺

Answer 15

visph Could u find a solution to my problem 🤨

Answer 16

Ok😀

Answer 17

you need to use touch events (mousemove doesn't fire with touch devices):

function paint(event){
for (var t of event.touches) {
touch.x = t.clientX;
touch.y = t.clientY;
drawCircle();
}
}
canvas.addEventListener('touchstart',paint);
canvas.addEventListener('touchmove',paint);
canvas.addEventListener('touchend',paint);

Answer 18

visph Your answer was perfect and worked well,Thank u😇👍

Answer 19

May I have a look of the working app

Answer 20

window.onload = function(){
const canvas =
document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.addEventListener('resize',function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});

const touch = {
x:null,
y:null,
};

canvas.addEventListener('click',function(event){
touch.x = event.x;
touch.y = event.y;
drawCircle();
});

/*
canvas.addEventListener('mousemove',function(event){
touch.x = event.x;
touch.y = event.y;
drawCircle();
});
*/

function drawCircle() {
ctx.fillStyle = '#fff';
ctx.strokeStyle = '#f1f';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.arc(touch.x,touch.y, 5, 0, Math.PI * 2);
ctx.stroke();
ctx.fill();
}
}
Now Run this code.
when our window is load then code is run.
without any error onload is an event in js