The HTML canvas functionality is not working on mobile

Question

In desktop environment, HTML5 canvas works well. But When I tried to run in mobile environment (Google Chrome Android) I cannot draw anything in canvas.

I think the problem is that touch events and click events work differently on mobile.

I wonder why this problem occurs. How can I solve this problem?

The full code are under below. And I also upload to github pages.

github pages Link

[JavaScript File]

//Create canvas
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

//Set background
ctx.fillStyle = "white";
ctx.fillRect(0, 0, 700, 500);

//Lines is default
lines();

var removeRectangleInLine = 0;

function lines() {
    //painting = false;
    //Remove event listeners so line won't draw rectangle
    if (removeRectangleInLine == 1) {
        canvas.removeEventListener('mousedown', rectMouseDown);
        canvas.removeEventListener('mouseup', rectMouseUp);
        canvas.removeEventListener('mousemove', rectMouseMove);
        canvas.removeEventListener('mouseout', rectMouseout);
    };

    //Initialize mouse coordinates to 0,0
    var mouse = { x: 0, y: 0};

    //Paint includes line width, line cap, and color
    paint = function() {
        ctx.lineTo(mouse.x, mouse.y);
        ctx.lineWidth = lineWidthRange();
        ctx.lineJoin = 'round';
        ctx.lineCap = brushstyle;
        ctx.strokeStyle = colors;
        ctx.stroke();
    };

    //Find mouse coordinates relative to canvas
    linesMousemove = function(e){
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
    };

    //User clicks down on canvas to trigger paint
    linesMousedown = function(){
        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);
        canvas.addEventListener('mousemove', paint, false);
    };

    //When mouse lifts up, line stops painting
    linesMouseup = function(){
        canvas.removeEventListener('mousemove', paint, false);
    };

    //When mouse leaves canvas, line stops painting
    linesMouseout = function() {
        canvas.removeEventListener('mousemove', paint, false);
    };

    //Event listeners that will trigger the paint functions when
    //mousedown, mousemove, mouseup, mouseout
    canvas.addEventListener('mousedown', linesMousedown, false);
    canvas.addEventListener('mousemove', linesMousemove, false);
    canvas.addEventListener('mouseup', linesMouseup, false);
    canvas.addEventListener('mouseout', linesMouseout, false);

};

//Color palette
var colors;
function changeColors(palette) {
    switch(palette.id) {
        case "red":
            colors = "red";
            break;
        case "red1":
            colors = "#F16161";
            break;
        case "red2":
            colors = "#F69FA0";
            break;
        case "orange":
            colors = "orange";
            break;
        case "orange1":
            colors = "#F99F62";
            break;
        case "orange2":
            colors = "#FBB57B";
            break;
        case "blue":
            colors = "#09C2DB";
            break;
        case "blue1":
            colors = "#8BD3DC";
            break;
        case "blue2":
            colors = "#B9E3E8";
            break;
        case "indigo":
            colors = "#0E38AD";
            break;
        case "indigo1":
            colors = "#546AB2";
            break;
        case "indigo2":
            colors = "#9C96C9";
            break;
        case "green":
            colors = "green";
            break;
        case "green1":
            colors = "#97CD7E";
            break;
        case "green2":
            colors = "#C6E2BB";
            break;
        case "black":
            colors = "black";
            break;
        case "black1":
            colors = "#545454";
            break;
        case "black2":
            colors = "#B2B2B2";
            break;
        case "yellow":
            colors = "yellow";
            break;
        case "yellow1":
            colors = "#F7F754";
            break;
        case "yellow2":
            colors ="#F7F4B1";
            break;
        case "purple":
            colors = "#B9509E";
            break;
        case "purple1":
            colors = "#D178B1";
            break;
        case "purple2":
            colors = "#E3ABCE";
            break;
        case "erase":
            colors = "white";
            break;
    }
};

//Change brush style
var brushstyle;
function changeBrushStyle(obj) {
    switch(obj.id) {
        case "round":
            brushstyle = "round";
            break;
        case "square":
            brushstyle = "butt";
            break;
        case "rough":
            brushstyle = "square";
            break;
    }
};

//Change line width
function lineWidthRange() {
    var widthLine = document.getElementById("myRange").value;
    return widthLine;
};

//Clear canvas
function erase() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
};

//Save image
var button = document.getElementById('dwnld');
button.addEventListener('click', function (e) {
var dataURL = canvas.toDataURL('image/png');
button.href = dataURL;

});

//Rectangle shape
function rectangle() {
    removeRectangleInLine = 1;

    canvas.removeEventListener('mousedown', linesMousedown, false);
    canvas.removeEventListener('mousemove', linesMousemove, false);
    canvas.removeEventListener('mouseup', linesMouseup, false);
    canvas.removeEventListener('mouseout', linesMouseout, false);
    
    //Initialize mouse coordinates to 0,0
    var mouse = {x: 0, y: 0};

    //Draw rectangle
    draw = function() {
        ctx.fillStyle = "black";
        ctx.fillStyle = colors;
        ctx.fillRect(mouse.x, mouse.y, mouse.w, mouse.h);
    };

    //Find mouse coordinates relative to canvas
    rectMouseMove = function(e) {
        mouse.w = (e.pageX - this.offsetLeft) - mouse.x;
        mouse.h = (e.pageY - this.offsetTop) - mouse.y ;
    };

    //User clicks down on canvas to trigger draw
    rectMouseDown = function(e) {
        ctx.beginPath();
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
        canvas.addEventListener('mousemove', draw, false);        
    };

    //When mouse lifts up, line stops drawing
    rectMouseUp = function() {
        canvas.removeEventListener('mousemove', draw, false);
    };

    //When mouse leaves canvas, line stops drawing
    rectMouseout = function() {
        canvas.removeEventListener('mousemove', draw, false);
    };

    //Event listeners that will trigger the draw functions when
    //mousedown, mousemove, mouseup, mouseout
    canvas.addEventListener('mousedown', rectMouseDown, false);
    canvas.addEventListener('mouseup', rectMouseUp, false);
    canvas.addEventListener('mousemove', rectMouseMove, false);
    canvas.addEventListener('mouseout', rectMouseout, false);
};

//Triangle shape
function triangle() {
    removeRectangleInLine = 1;

    canvas.removeEventListener('mousedown', linesMousedown, false);
    canvas.removeEventListener('mousemove', linesMousemove, false);
    canvas.removeEventListener('mouseup', linesMouseup, false);
    canvas.removeEventListener('mouseout', linesMouseout, false);
    
    //Initialize mouse coordinates to 0,0
    var mouse = {x: 0, y: 0};

    //Draw triangle
    draw = function() {
        //Top of triangle
        ctx.moveTo(mouse.x,mouse.y);
        ctx.lineTo(mouse.y, mouse.x);
        ctx.lineTo(mouse.x, mouse.x);
        ctx.closePath();

        ctx.strokeStyle = colors;
        ctx.stroke();

        ctx.fillStyle = "black";
        ctx.fillStyle = colors;
        ctx.fill();

    };

    //Find mouse coordinates relative to canvas
    rectMouseMove = function(e) {
        mouse.w = (e.pageX - this.offsetLeft) - mouse.x;
        mouse.h = (e.pageY - this.offsetTop) - mouse.y ;
    };

    //User clicks down on canvas to trigger draw
    rectMouseDown = function(e) {
        ctx.beginPath();
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
        canvas.addEventListener('mousemove', draw, false);        
    };

    //When mouse lifts up, line stops drawing
    rectMouseUp = function() {
        canvas.removeEventListener('mousemove', draw, false);
    };

    //When mouse leaves canvas, line stops drawing
    rectMouseout = function() {
        canvas.removeEventListener('mousemove', draw, false);
    };

    //Event listeners that will trigger the draw functions when
    //mousedown, mousemove, mouseup, mouseout
    canvas.addEventListener('mousedown', rectMouseDown, false);
    canvas.addEventListener('mouseup', rectMouseUp, false);
    canvas.addEventListener('mousemove', rectMouseMove, false);
    canvas.addEventListener('mouseout', rectMouseout, false);
};

body {
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}

a {
  color: black;
  text-decoration: none; 
}

#title {
  font-size: 50px;
  text-align: center;
  letter-spacing: -2px;
  font-weight: normal;
}

#erasing {
  height: 20px;
  margin-bottom: 13px;
}

#contain {
  padding-left: 13px;
  height: 280px;
}

.palette {
  width: 23px;
  height: 23px;
  float: left;
  margin: 6px;
}

.shapes {
  width: 23px;
  height: 23px;
  margin: 0 auto;
  display: inline-block;
}

#shaperectangle {
  border: 1px solid transparent;
  background: #6a6a6a;
}

#shapetriangle {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 25px solid #1f1f1f;
  display:inline-block;
  background: white;
}

.red { background: red; }
.red1 { background: #F16161; }
.red2 { background: #F69FA0; }
.orange { background: orange; }
.orange1 { background: #F99F62; }
.orange2 { background: #FBB57B; }
.blue { background: #09C2DB; }
.blue1 { background: #8BD3DC; }
.blue2 { background: #B9E3E8; }
.indigo { background: #0E38AD; }
.indigo1 { background: #546AB2; }
.indigo2 { background: #9C96C9; }
.green { background: green; }
.green1 { background: #97CD7E; }
.green2 { background: #C6E2BB; }
.black { background: black; }
.black1 { background: #545454; }
.black2 { background: #B2B2B2; }
.yellow { background: yellow; }
.yellow1 { background: #F7F754; }
.yellow2 { background: #F7F4B1; }
.purple { background: #B9509E; }
.purple1 { background: #D178B1; }
.purple2 { background: #E3ABCE; }

.white {
  background: white;
  border: 1px solid gray;
  float: none;
  margin: 0 auto;
  border-radius: 50%;
}

#paintbg {
  width: 1058px;
  height: 590px;
  margin: 0 auto;
}

#colorpanel {
  width: 130px;
  height: 450px;
  float: left;
  margin-right: 18px;
  border: 1px solid black;
}

#linepanel {
  margin-top: 75px;
  width: 185px;
  height: 317px;
  float: right;
  border: 1px solid black;
}

#canvasarea {
  width: 700px;
  height: 500px;
  float: left;
  margin-top: -20px;  
}

#space {
  width: 130px;
  height: 24px;
  margin: 0 auto;
}

#sliderInput {
  width: 14px;
  height: 15px;
  float: right;
  margin-right: 37px;
  margin-top: -13px;
}

.button {
  background-color: white;
  color: black;
  border: 1px solid black;
  outline: 0;
  margin-top: 5px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}

#round {
  border-radius: 10px;
}

#rough {
  border-style: dotted solid;
}

input.vertical {
  -webkit-appearance: slider-vertical;
  writing-mode: bt-lr;
}

input[type=range]{
  width: 65%;
  display: inline-block;
}

input[type=button]{
  margin-bottom: 5px;
  background-color: white;
  color: black;
  border: 1px solid black;
  width: 65px;
  outline: 0;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
}

input[type=range]::-webkit-slider-runnable-track {
  margin-top: -10px;
  margin-left: 15px;
  width: 308px;
  height: 3px;
  background: #000;
  border: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: slider-vertical;
  height: 16px;
  width: 16px;
  border: 3px solid blue;
  margin-top: -4px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: black;
}



  
    Simple HTML5 Canvas Paint App
    
      
  
    
    SIMPLE  HTML5  PAINT
      
      Colors
       
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
       

       Eraser
       
       

       

      
       
      

      
       Brush Width
        
          
          
            

          
        
        

        Brush Style
         

         

         


        Shapes

user_16705911 · Answer

I haven't read the whole things, but I don't need I guess. You are trying to use mouse event on the mobile which is incorrect. On mobile we use pointer events.

That may helps https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/pointerdown_event

The HTML canvas functionality is not working on mobile

1 Answers