CODEWITHSUNDEEP
javascripthtmlcanvas
Dreams
Dreams

Reputation: 8506

How can I get coordinate of a image on canvas?

function writeMessage(canvas, message) {
		var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '12pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
}

function make_base() {
  base_image = new Image();
  base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
make_base();

canvas.addEventListener('mousemove', function(evt) {
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);
}, false);
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>

I can add a image on a canvas and also get coordinates of canvas when mouse hovers on it.

But I when I hover on photo, the image will disappear.

Upvotes: 0

Views: 782

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

The issue is, you are clearing the entire canvas each time before drawing the text (message), which clears the image as well.

To resolve this, you would need to re-draw the image after clearing the canvas and before drawing the text ...

function writeMessage(canvas, message) {
   var context = canvas.getContext('2d');
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(base_image, 0, 0); //<-- draw image
   context.font = '12pt Calibri';
   context.fillStyle = 'red';
   context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
   var rect = canvas.getBoundingClientRect();
   return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
   };
}

function make_base() {
   base_image = new Image();
   base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
   base_image.onload = function() {
      context.drawImage(base_image, 0, 0);
   }
}

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
make_base();

canvas.addEventListener('mousemove', function(evt) {
   var mousePos = getMousePos(canvas, evt);
   var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
   writeMessage(canvas, message);
}, false);
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>

Upvotes: 1

Related Questions