Почему скрипт js не работает в мобильной версии браузеров?

Question

[Onotoliy]

После проверки на десктопе попробовал запустить в каком-нибудь мобильном браузере, однако js не захотел ни рисовать в canvas, ни удалять класс после этого.

var canvas1 = document.getElementById("panno1");
var crd1 = canvas1.getContext("2d");
crd1.fillStyle = "red";
crd1.strokeStyle = "red";
crd1.fillRect(0, 0, 150, 300);

var canvas1 = document.getElementById("panno1"),
  context1 = canvas1.getContext("2d"),
  w = canvas1.width,
  h = canvas1.height;

var mouse1 = { x: 0, y: 0 };
var draw1 = false;

canvas1.addEventListener("mousedown", function (e1) {
  mouse1.x = e1.pageX - this.offsetLeft;
  mouse1.y = e1.pageY - this.offsetTop;
  draw1 = true;

  context1.moveTo(mouse1.x, mouse1.y);
});

canvas1.addEventListener("mousemove", function (e1) {
  if (draw1 == true) {
    mouse1.x = e1.pageX - this.offsetLeft;
    mouse1.y = e1.pageY - this.offsetTop;
    context1.clearRect(mouse1.x, mouse1.y, 30, 30);
  }
});

canvas1.addEventListener("mouseup", function (e1) {
  context1.closePath();
  draw1 = false;
});

var myImageData = crd1.getImageData(0, 0, 550, 550);
var j = 0;
canvas1.onclick = function () {
  j++;
  myImageData = crd1.getImageData(0, 0, 550, 550);
  if (j >= 5) {
    crd1.clearRect(0, 0, 150, 300);
  }
};

///////////////////////////////////////////////

var canvas2 = document.getElementById("panno2");
var crd2 = canvas2.getContext("2d");
crd2.fillStyle = "red";
crd2.strokeStyle = "red";
crd2.fillRect(0, 0, 150, 300);

var canvas2 = document.getElementById("panno2"),
  context2 = canvas2.getContext("2d"),
  w = canvas2.width,
  h = canvas2.height;

var mouse2 = { x: 0, y: 0 };
var draw2 = false;

canvas2.addEventListener("mousedown", function (e2) {
  mouse2.x = e2.pageX - this.offsetLeft;
  mouse2.y = e2.pageY - this.offsetTop;
  draw2 = true;

  context2.moveTo(mouse2.x, mouse2.y);
});

canvas2.addEventListener("mousemove", function (e2) {
  if (draw2 == true) {
    mouse2.x = e2.pageX - this.offsetLeft;
    mouse2.y = e2.pageY - this.offsetTop;
    context2.clearRect(mouse2.x, mouse2.y, 30, 30);
  }
});

canvas2.addEventListener("mouseup", function (e2) {
  context2.closePath();
  draw2 = false;
});

var myImageData = crd2.getImageData(0, 0, 550, 550);
var k = 0;
canvas2.onclick = function () {
  k++;
  myImageData = crd2.getImageData(0, 0, 550, 550);
  if (k >= 5) {
    crd2.clearRect(0, 0, 150, 300);
  }
};

///////////////////////////////////////////////

var canvas = document.getElementById("panno3");
var crd = canvas.getContext("2d");
crd.fillStyle = "red";
crd.strokeStyle = "red";
crd.fillRect(0, 0, 150, 300);

var canvas = document.getElementById("panno3"),
  context = canvas.getContext("2d"),
  w = canvas.width,
  h = canvas.height;

var mouse = { x: 0, y: 0 };
var draw = false;

canvas.addEventListener("mousedown", function (e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
  draw = true;

  context.moveTo(mouse.x, mouse.y);
});

canvas.addEventListener("mousemove", function (e) {
  if (draw == true) {
    mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
    context.clearRect(mouse.x, mouse.y, 30, 30);
  }
});

canvas.addEventListener("mouseup", function (e) {
  context.closePath();
  draw = false;
});

var myImageData = crd.getImageData(0, 0, 550, 550);
var i = 0;
canvas.onclick = function () {
  i++;
  myImageData = crd.getImageData(0, 0, 550, 550);
  if (i >= 5) {
    crd.clearRect(0, 0, 150, 300);
  }
};

var columns = document.querySelector(".columns");
var dark = document.querySelector(".dark");
var surprise = document.querySelector(".surprise");
var submit = document.querySelector(".button-container");
columns.onclick = function () {
  if (i >= 5 && j >= 5 && k >= 5) {
    dark.classList.remove("none-visible");
    surprise.classList.remove("none-visible");
    submit.classList.remove("none-visible");
  }
};

Answer 1

[kocherman]

А что вы хотите от мобильного браузера?

Замените mousedown, mouseup и mosemove на touchstart, touchend и touchmove.

И все заработает на мобильнике... :-)

Comments

[Onotoliy]

Хех, спасибо большое.