Getting the exact mouse position on canvas inside divisons

Question

I am having canvas inside two div tags. I am try to draw with pencil on the canvas but i am not able get start at exact mouse pointer location here is code CSS

div.ot_whiteboard
 {
 display: block;
 background-color: #DCD9CD;
 margin: 0 auto;
 padding: 10px;
 position: relative;
 }
canvas.canvas_test{
 height:100%;
 width:100%;
position:relative;
    }

JS

var mainCanvas =document.getElementById('canvas_test');
 var previousMousePos,mousePos,paint=false;


  mainCanvas.addEventListener("mousemove",draw,false);
  mainCanvas.addEventListener("mousedown",startdraw,false);
  mainCanvas.addEventListener("mouseup",stopdraw,false);

 function startdraw(event){
  paint=true;
 previousMousePos = getMousePos(event);
 }
function draw(event){
if(paint){
 mousePos = getMousePos(event);
var mainCanvas = document.getElementById('canvas_test');
var ctx = mainCanvas.getContext('2d');
 console.log(" X position :"+ previousMousePos.x);
  console.log(" X position :"+ mousePos.x);
 console.log(" Y position :"+ previousMousePos.y);
 console.log(" Y position :"+ mousePos.y);
 ctx.strokeStyle = "black";
       ctx.lineWidth = 2;
       ctx.beginPath();
       ctx.moveTo(previousMousePos.x, previousMousePos.y);
       ctx.lineTo(mousePos.x, mousePos.y);
       ctx.stroke();
       ctx.closePath();
   previousMousePos = mousePos;
 }
}
function stopdraw(event){
  paint=false;
 previousMousePos = getMousePos(event);
 }

function getMousePos(evt) {
                var obj=document.getElementById("canvas_test");
        var top = 0;
        var left = 0;
        while (obj) {
            top += obj.offsetTop;
            left += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        // return relative mouse position
        var mouseX = evt.clientX - left + this.pageXOffset;
        var mouseY = evt.clientY - top + this.pageYOffset;
        return {
            x:mouseX,
            y:mouseY
        };
    }

HTML

<div style="width:800px;height:520px;border:1px solid black;position: relative;" >
 <div class="ot_whiteboard" style="width:500px;height:500px;align:center;">
 <canvas id="canvas_test" class="canvas_test"></canvas>
</div>

Could you please help me to get the exact pointer of mouse co-ords

score 3 · Accepted Answer · answered Jul 18 '17 at 10:19

3

You need to scale the mouse coordinates to match the canvas resolution.

// your code
var mouseX = evt.clientX - left + window.pageXOffset;
var mouseY = evt.clientY - top + window.pageYOffset;

// Add the following 3 lines to scale the mouse coordinates to the
// canvas resolution
const bounds = canvas_test.getBoundingClientRect();
mouseX = (mouseX / bounds.width) * canvas_test.width;
mouseY = (mouseY / bounds.height) * canvas_test.height;

// your code
return {
    x:mouseX,
    y:mouseY
};

answered Jul 18 '17 at 10:19

Blindman67

51,134
11
73
136

Thanks @Blindman67 it worked..!! – Salesman Jul 18 '17 at 12:16
Works welll cross-browser (!), but we have to pass in the `scrollY`, and `scrollX` as well, and if the container has a scroll-bar, it starts to not render well cross-browser. This problem is really tricky. – NVRM Apr 13 '22 at 17:08

Getting the exact mouse position on canvas inside divisons

1 Answers1