CODEWITHSUNDEEP
javascriptcanvas
3.14159
3.14159

Reputation: 267

mouse coordinates in canvas not working

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
var mouseX=0;
var mouseY=0;
var canvasPos=getPosition(canvas);

ctx.addEventListener("mousemove",setMousePosition,false);
function getPosition(e1) {
  var xPosition = 0;
  var yPosition = 0;

  while (e1) {
    xPosition += (e1.offsetLeft - e1.scrollLeft + e1.clientLeft);
    yPosition += (e1.offsetTop - e1.scrollTop + e1.clientTop);
    e1 = e1.offsetParent;
  }
  return { x: xPosition, y: yPosition };
}
function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
  ctx.fillStyle = "#FF6A6A";
  ctx.fill();
  ctx.closePath();
}

function getPosition(e1) {
  var xPosition=0;
  var yPosition=0;
  while(e1) {
    xPosition+=(e1.offsetLeft-e1.scrollLeft+e1.clientLeft);
    yPosition+=(e1.offsetTop-e1.scrollTop+e1.clientTop);
    e1=e1.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}
<canvas id="canvas"></canvas>

The goal is for a canvas element to follow the mouse movement. My attempt is pasted above. I tried retrieving the exact mouse coordinates and used it to re-draw the element. I don't seem to be getting any output, only a blank canvas. Any help is appreciated.

Upvotes: 0

Views: 53

Answers (2)

mehulmpt
mehulmpt

Reputation: 16547

You've to add event listener to canvas not to its context

var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
var mouseX=0;
var mouseY=0;
var canvasPos=getPosition(canvas);

canvas.addEventListener("mousemove",setMousePosition,false); // <-- this
function getPosition(e1) {
  var xPosition = 0;
  var yPosition = 0;

  while (e1) {
    xPosition += (e1.offsetLeft - e1.scrollLeft + e1.clientLeft);
    yPosition += (e1.offsetTop - e1.scrollTop + e1.clientTop);
    e1 = e1.offsetParent;
  }
  return { x: xPosition, y: yPosition };
}
function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
  ctx.fillStyle = "#FF6A6A";
  ctx.fill();
  ctx.closePath();
}

function getPosition(e1) {
  var xPosition=0;
  var yPosition=0;
  while(e1) {
    xPosition+=(e1.offsetLeft-e1.scrollLeft+e1.clientLeft);
    yPosition+=(e1.offsetTop-e1.scrollTop+e1.clientTop);
    e1=e1.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}
<canvas id="canvas"></canvas>

Upvotes: 1

TessavWalstijn
TessavWalstijn

Reputation: 1726

You had 2 typos:

  1. var context...
  2. ctx.addEventListener(...)

The: ctx.addEventListener() is not possible because of the context has no events. The canvas does have those.

var canvas=document.getElementById('canvas');
// edit from context to ctx
var ctx=canvas.getContext("2d");
var mouseX=0;
var mouseY=0;
var canvasPos=getPosition(canvas);
// edit ctx to canvas
canvas.addEventListener("mousemove",setMousePosition,false);
function getPosition(e1) {
  var xPosition = 0;
  var yPosition = 0;

  while (e1) {
    xPosition += (e1.offsetLeft - e1.scrollLeft + e1.clientLeft);
    yPosition += (e1.offsetTop - e1.scrollTop + e1.clientTop);
    e1 = e1.offsetParent;
  }
  return { x: xPosition, y: yPosition };
}
function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(mouseX, mouseY, 50, 0, 2 * Math.PI, true);
  ctx.fillStyle = "#FF6A6A";
  ctx.fill();
  ctx.closePath();
}

function getPosition(e1) {
  var xPosition=0;
  var yPosition=0;
  while(e1) {
    xPosition+=(e1.offsetLeft-e1.scrollLeft+e1.clientLeft);
    yPosition+=(e1.offsetTop-e1.scrollTop+e1.clientTop);
    e1=e1.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}
<canvas id="canvas"></canvas>

Upvotes: 1

Related Questions