onmousedown and onmouseup not working when activated by touchscreen

Question

I have two buttons that are supposed to act as touchscreen controls for a game on my webpage, each button moves the paddle in one direction while it is being held down, and they both do exactly as they are supposed to, but only when they are being clicked by a mouse on a computer. All of the other buttons work when they are clicked on touchscreen, but none of those use onmousedown and onmouseup. Anybody have any idea what's going on and how to fix it?

<canvas id="myCanvas" width="480" height="320" style = 'display : none;' class = 'keepIt'></canvas>
<br>

<div style = 'display: none; width: 30%; margin: auto;' id = 'b'>
<button style = 'font-size:50px;' onmousedown  = 'touchLeft()' onmouseup = 'liftLeft()'> left</button>
<button style = 'font-size: 50px;' onmousedown = 'touchRight()' onmouseup = 'liftRight()'> right</button>
</div>
<script>
 
 var canvas = document.getElementById("myCanvas");

var b = document.getElementById("b");

var ctx = canvas.getContext("2d");
var x = canvas.width/2;

var y = canvas.height-40;
var dx = 2;
var dy = -2;
var ballRadius = 10;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
var rightPressed = false;
var leftPressed = false;
var difficulty = 10
var score = 0
var gameRunning = false
var paused = false


function paddleMoveLeft(){   paddleX -= 5;
    if (paddleX < 0){
        paddleX = 0;
    }}
function paddleMoveRight(){  paddleX += 5;
    if (paddleX + paddleWidth > canvas.width){
        paddleX = canvas.width - paddleWidth;
    }}
 function touchLeft(){leftPressed = true;}
 function liftLeft(){leftPressed = false;}
 function touchRight(){rightPressed = true;}
function liftRight(){rightPressed= false;}
function playGame(){
b.style.display = 'block'
canvas.style.display = 'block'

function playPause(){
if(paused === true){paused = false}
else {paused = true}
}
function drawBall() {
    ctx.beginPath();
   ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
function drawScore() {
    ctx.font = "50px ";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}
function draw() {
 if (paused === false){
 ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
   drawScore();
   x += dx;
    y += dy;
  if (rightM = true) {paddleMoveRight();}
if (leftM = true ){paddleMoveLeft();}
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}
if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
        difficulty = difficulty + 1.5;
  score = score + 1;
  }
    else {
       x = canvas.width/2;
      y = canvas.height-40;
        dy = -dy;
     alert("GAME OVER! you scored " + score);
         ctx.clearRect(0, 0, canvas.width, canvas.height);
        clearInterval(interval);
  score = 0;

canvas.style.display = 'none';
b.style.display = 'none';
}
}

if(rightPressed) {
  paddleMoveRight();
}
else if(leftPressed) {
  paddleMoveLeft();
}

}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(e) {
    if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
}
var interval = setInterval(draw, difficulty);}
 
    
 
</script>


<div>
<button onclick = 'hide()'> Hide or show the games</button>
<br>
<button onclick = 'PausePlay()'> Pause/play games</button>
<br>

</div>
<br><br><br><br>
<button onclick = 'playGame()'>play keep it alive </button>

Answer 1

You need to use ontouchstart and ontouchend in the place of onmousedown and onmouseup.