Как сделать так, чтобы холст / SVG кружили на изображении?

Question

У меня возникла проблема с рисованием круга на изображении, и я надеюсь, что смогу сделать что-то вроде этой картинки. (из http://www.kinhub.org/kinmap/index.html)

нарисовать круг на изображении

Я пытаюсь это сделать, но не получается, как этот код, круг не может покрыть на изображении, и я не знаю, как справиться с этой проблемой, пожалуйста, помогите мне или дайте мне ключевое слово для поиска.

var img = document.getElementById("Kinome_tree");
var c = document.getElementById("circle");
c.style.position = "absolute";
c.style.left = img.offsetLeft;
c.style.top = img.offsetTop;

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(0,50,10,0,2*Math.PI);
ctx.lineWidth = 3;
ctx.strokeStyle = '#00ff00';
ctx.stroke();

<img id="Kinome_tree" src="https://media.cellsignal.com/www/images/science/kinases/kinome.jpg" border="0" width="300">
<canvas id="circle"></canvas>

Answer 1

1. Как уже упоминалось, вы должны добавить px для смещения вверху и влево

2. Я вообще не вижу причины перемещать холст - пусть холст покрывает все изображение и рисует круг / круги в указанных позициях / размерах

3. Первые 2 параметра arc - это centerX и centerY. Поэтому, учитывая 0, вы обрезаете круг наполовину

4. На изображении, которое вы предоставили, он выглядит так, как вы хотите fill круга. не stroke. поэтому вы должны использовать fill function

Я рекомендую сделать что-то вроде этого:

var im = document.getElementById("Kinome_tree");
var c = document.getElementById("circle");
c.style = "position:absolute;left:0;top:0;width:100%;height:100%;display:block";

im.onload = function(){
  c.width = im.offsetWidth;
  c.height = im.offsetHeight;
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(50,50,10,0,2*Math.PI);
  ctx.lineWidth = 3;
  ctx.fillStyle = '#00ff00';
  ctx.fill();
}

#image-container {
  position: relative;
  display: inline-block;
}
#Kinome_tree {
  display: block;
}

<div id="image-container">
<img id="Kinome_tree" src="https://media.cellsignal.com/www/images/science/kinases/kinome.jpg" border="1" width="300">
<canvas id="circle"></canvas>
</div>

Answer 2

Пожалуйста, добавьте + "px" , где вы устанавливаете левую и правую со смещением

Ниже приведено приспособление:

var im = document.getElementById("Kinome_tree");
var c = document.getElementById("circle");
c.style.position = "absolute";
c.style.left = im.offsetLeft + "px";
c.style.top = im.offsetTop + "px";

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(0,50,10,0,2*Math.PI);
ctx.lineWidth = 3;
ctx.strokeStyle = '#00ff00';
ctx.stroke();

<img id="Kinome_tree" src="https://media.cellsignal.com/www/images/science/kinases/kinome.jpg" border="1" width="300">
<canvas id="circle"></canvas>