CODEWITHSUNDEEP
javascriptjqueryhtmlcsscanvas
suzume
suzume

Reputation: 21

How to let canvas/svg circle on image?

I have some problem on draw circle on image, and I hope I can do something like this picture. (from http://www.kinhub.org/kinmap/index.html)

draw circle on image

I'm trying to do that but fail like this code, circle cannot cover on image and I have no idea to deal with this problem, please help me or give me some keyword to search.

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>

Upvotes: 1

Views: 442

Answers (2)

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

1. As already mentioned, you should add px to offset top and left

2. I not see a reason at all to move the canvas around - have the canvas cover the whole image, and draw the circle/circles at the specified positions/size

3. The first 2 parameters of arc is the centerX and centerY.so by given 0 you cut the circle by half

4. From the image you provided its look like you want to fill the circle. not stroke. so you should use fill function

I recommend do something like this: 

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>

Upvotes: 1

Sahil Dhir
Sahil Dhir

Reputation: 4250

Kindly add + "px" where you are setting your left and right with offsets

Below is the fixture:

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>

Upvotes: 1

Related Questions