Canvas using Javascript,working on Desktop ,but not working on Mobile Phone

Question

I have made canvas using javascript which works fine on Desktop but does not works on mobile. On mobile when I try to draw, it only gets scrolled. Please help me with the code to draw on mobile as well. P.S : I have taken the mobile code from some website ,but it still does not works. Please tell and explain the code on how to get it draw on mobile ? Thankyou !

EDIT : IT IS LAGGING ON STACKOVERFLOW WHEN YOU RUN THE SNIPPET . HAVE A LOOK HERE PLEASE : https://codepen.io/dikshatakyar/full/YzVgJWK EDIT 2 : ISSUE RESOLVED. THANKYOU.

const canvas=document.querySelector('#draw');

const ctx=canvas.getContext('2d');
// all the drawing for the canvas in ctx
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;

ctx.strokeStyle= '#51c9bb';
ctx.lineJoin='round';
ctx.lineCap='round';
ctx.lineWidth=30;

//flag
let isDrawing=false; //don't draw when mouse is just moving mouse w/o doing anything

//where to start a line from and then where to end it
let lastX=0;
let lastY=0;
let hue=0;
let direction=true;

function draw(e){
    if(!isDrawing)
    return; //only run in click and drag
console.log(e);
ctx.strokeStyle= `hsl(${hue},100%,50%)`;
ctx.beginPath();
ctx.moveTo(lastX,lastY); //start from
ctx.lineTo(e.offsetX,e.offsetY); //go to
ctx.stroke(); //to actually draw the path on canvas
[lastX,lastY]=[e.offsetX,e.offsetY];
// lastX=e.offsetX;
// lastY=e.offsetY;

hue++;
if(hue>=360){
    hue=0;
}
if(ctx.lineWidth>=80 || ctx.lineWidth<=1){
    direction=!direction;
}
if(direction)
ctx.lineWidth++;
else
ctx.lineWidth--;
}

canvas.addEventListener('mousemove',draw);
canvas.addEventListener('mousedown',(e)=>{
    isDrawing=true;
    [lastX,lastY]=[e.offsetX,e.offsetY];
});


canvas.addEventListener('mouseup',()=>isDrawing=false);
canvas.addEventListener('mouseout',()=>isDrawing=false);


//canvas on mobile
document.body.addEventListener("touchstart", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchend", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);
document.body.addEventListener("touchmove", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
  }
}, false);

*{
            margin: 0;
           
        }
     

<canvas id="draw" width="800" height="800"></canvas>
 

Answer 1

Use overflow: hidden; for *

Here's the code:

* {
   margin: 0;
   padding: 0;
   overflow: hidden;
}

Answer 2

I don’t do much touch stuff but MDN handles touches using

   clientX = e.touches[0].clientX;
   clientY = e.touches[0].clientY;

Source: https://developer.mozilla.org/en-US/docs/Web/API/Touch/clientX

Something like this works using that

const canvas=document.querySelector('#draw');

const ctx=canvas.getContext('2d');
// all the drawing for the canvas in ctx
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;

ctx.strokeStyle= '#51c9bb';
ctx.lineJoin='round';
ctx.lineCap='round';
ctx.lineWidth=30;

//flag
let isDrawing=false; //don't draw when mouse is just moving mouse w/o doing anything

//where to start a line from and then where to end it
let lastX=0;
let lastY=0;
let hue=0;
let direction=true;

function draw(clientX, clientY){
    if(!isDrawing)
    return; //only run in click and drag

ctx.strokeStyle= `hsl(${hue},100%,50%)`;
ctx.beginPath();
ctx.moveTo(lastX,lastY); //start from
ctx.lineTo(clientX,clientY); //go to
ctx.stroke(); //to actually draw the path on canvas
[lastX,lastY]=[clientX,clientY];
// lastX=e.offsetX;
// lastY=e.offsetY;

hue++;
if(hue>=360){
    hue=0;
}
if(ctx.lineWidth>=80 || ctx.lineWidth<=1){
    direction=!direction;
}
if(direction)
ctx.lineWidth++;
else
ctx.lineWidth--;
}

//canvas on mobile
document.body.addEventListener("touchstart", function (e) {
  if (e.target == canvas) {
   e.preventDefault();
   clientX = e.touches[0].clientX;
   clientY = e.touches[0].clientY; 
   isDrawing=true;
   draw(clientX, clientY)
  }
}, false);
document.body.addEventListener("touchend", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
    isDrawing=false;
  }
}, false);
document.body.addEventListener("touchmove", function (e) {
  if (e.target == canvas) {
    e.preventDefault();
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
    draw(clientX, clientY)
  }
}, false);