0

I've have recently figured out how to click on a javascript canvas, but there is a problem when I try to scale the image with CSS, it just doesn't work. This is what I learned to do for the canvas clicking stuff:

window.onload = function(){
    c = document.getElementById("C");
    g = c.getContext("2d");
    c.addEventListener("mousemove", mouseUpdate);
}
function mouseUpdate(event){
    mouseX = event.pageX - c.offsetLeft;
    mouseY = event.pageY - c.offsetTop;
}

This code works but the second I add CSS to scale the canvas...

#C{
    width:80%;
    height:80%;
}

The the mouse is miss aligned again. The canvas is set to be 1920x1080, and scaled down by 80%. Does anyone know already how to fix this problem, because I haven't found anyone else with the same problem that has issues with CSS...

Joseph
  • 127
  • 2
  • 10
  • @K3N I tried that, function mouseUpdate(event){ var rect = c.getBoundingClientRect(); mouseX = event.pageX - rect.left; mouseY = event.pageY - rect.top; } – Joseph Dec 09 '16 at 01:13
  • Note that you need to use the scaling method (not the 1:1 method, see second example "When Element and Bitmap are of different sizes"). –  Dec 09 '16 at 04:11
  • @K3N ok, ill try that – Joseph Dec 09 '16 at 14:54
  • 1
    @K3N I did it and it works perfectly, thanks for the help :) – Joseph Dec 09 '16 at 15:51

0 Answers0