не работает click в canvas

Question

Есть img в canvas! Поворачиваю на Math.PI / 3 (60 град.) Ctx.rotate () - поворачивается !!! Вешаю событие щелкни по холсту - ничего не происходит !? В чем дело ???

let dest = Math.PI / 3;
let  canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

function drawImg() {      
  if (canvas.getContext) {
    let myImage = new Image();
    let dataURL = canvas.toDataURL();
    myImage.src = dataURL;
    myImage.onload = function(){// onload отрисовываем после загрузки image
      ctx.save();
      ctx.drawImage(img, 0, 0);
      ctx.setTransform(1, 0, 0, 1, 0, 0);//restore scale;
      ctx.restore();
    }
  }
}

function rotate() {       
  ctx.translate(canvas.width / 2, canvas.height/2);
  ctx.rotate(dest);
  ctx.translate(-canvas.width / 2, -canvas.height/2); 
  drawImg();             
}

rotate(); //работает
canvas.onclick = function() {rotate();}// не работает????
canvas.addEventListener("click", rotate);// не работает????

Answer 1

let dest = Math.PI / 6;
let ctx = canvas.getContext("2d");

let myImage = new Image();
myImage.crossOrigin = true;
myImage.src = 'https://picsum.photos/300/150';
myImage.onload = function(){
  ctx.drawImage(myImage, 0, 0);
}

function drawImg() {      
  let myImage = new Image();
  let dataURL = canvas.toDataURL();
  myImage.src = dataURL;
  myImage.onload = function(){
    ctx.drawImage(myImage, 0, 0);
  }
}

function rotate() {       
  ctx.translate(canvas.width / 2, canvas.height/2);
  ctx.rotate(dest);
  ctx.translate(-canvas.width / 2, -canvas.height/2); 
  drawImg();             
}

canvas.addEventListener("click", rotate);

<canvas id=canvas ></canvas>

БЛОГ НА HUSL

не работает click в canvas

Ответы (1 шт):