CODEWITHSUNDEEP
javascripthtml
kishore
kishore

Reputation: 141

draw a circle over a image in html5 and javascript

html code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function start() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var image = new Image();

    image.onload = function () {
        ctx.drawImage(image, 69, 50);
        //draw a circle
        ctx.beginPath();
        ctx.arc(100, 75, 10, 0, Math.PI * 2, true);
        ctx.stroke();
     };

    image.src = 'xy-coordinates.jpg';                 
  }
</script>
</head>
<img id="myImgId" alt="" src="xy-coordinates.jpg" />
<input type="button" value="submit" onclick="start()"> 
<canvas id="myCanvas" width="700" height="393"></canvas>
</body>
</html>

I'm trying to draw a circle on an image dynamically once I click the button.

The problem is after clicking the button, I'm getting an extra image (with the circle drawn) displayed on the screen rather drawing on original image.

My requirement is to draw a circle on an image which is already displayed.

UPDATED 

<script>

function Draw(){
var img = document.getElementById("theImg");
var cnvs = document.getElementById("myCanvas");

cnvs.style.position = "absolute";
cnvs.style.left = img.offsetLeft + "px";
cnvs.style.top = img.offsetTop + "px";

var ctx = cnvs.getContext("2d");
ctx.beginPath();
ctx.arc(250, 210, 10, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.stroke();
}


</script>

<img id='theImg' src='xy-coordinates.jpg'>
<input type='button' value='Draw' onclick='draw()' ><br>
<canvas id='myCanvas' width="700" height="393"></canvas>

when < br > is used in html tag befor or after canvas there comes a huge distance betweein image and button r any tags i place in there. how to rectify it ?

Upvotes: 10

Views: 33839

Answers (2)

Alexander Dayan
Alexander Dayan

Reputation: 2924

You don't need to create one more image because canvas in fact is an image by itself. Place your canvas on top of the source image by setting its position to absolute, left and top same as the source image:

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

Then just draw into canvas:

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 10, 0, Math.PI * 2, true);
ctx.stroke();

UPDATE:

function Draw(){
  var img = document.getElementById("theImg");
  var cnvs = document.getElementById("myCanvas");
  
  cnvs.style.position = "absolute";
  cnvs.style.left = img.offsetLeft + "px";
  cnvs.style.top = img.offsetTop + "px";
  
  var ctx = cnvs.getContext("2d");
  ctx.beginPath();
  ctx.arc(250, 210, 200, 0, 2 * Math.PI, false);
  ctx.lineWidth = 3;
  ctx.strokeStyle = '#00ff00';
  ctx.stroke();
}
#draw-btn {
  font-size: 14px;
  padding: 2px 16px 3px 16px;
  margin-bottom: 8px;
}
<div>
  <input id='draw-btn' type='button' value='Draw' onclick='Draw()' />
</div>
<img id='theImg' src='http://i.telegraph.co.uk/multimedia/archive/02351/cross-eyed-cat_2351472k.jpg'>
<canvas id='myCanvas' width='536px' height='536px'></canvas>

Upvotes: 17

Narek Hayrapetyan
Narek Hayrapetyan

Reputation: 1929

You are drawing one image on canvas, and second image with "img" tag (already displayed). you can't draw circle with canvas, on HTML tag.

Upvotes: 0

Related Questions