dessinez un cercle sur une image en html5 et javascript

code html :

<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>

Je suis en train de dessiner un cercle sur une image dynamiquement une fois que je clique sur le bouton.

Le problème, c'est après avoir cliqué sur le bouton, j'obtiens une image supplémentaire (avec le cercle tracé) affichée sur l'écran plutôt le dessin sur l'image d'origine.

Mon exigence est de dessiner un cercle sur une image qui est déjà affiché.

Mis à JOUR 

<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>

quand < br > est utilisé dans la balise html avant ou après la toile il y a un énorme distance betweein image et un bouton de r toutes les étiquettes que je place là-dedans. comment rectifier ?

OriginalL'auteur kishore | 2015-02-11

  1. 0

    Vous dessinez une image sur la toile, et la deuxième image avec "img" tag (déjà affiché). vous ne pouvez pas dessiner le cercle avec de la toile, sur la balise HTML.

    est-il possible de le faire de façon dynamique ?
    Non, vous ne pouvez déplacer <img> élément <canvas> avec les css (mais ce n'est pas la bonne façon), mais s'en toile élément sur la balise html pas. Vous devriez appuie à la fois sur de la Toile (mieux)
    je ne suis pas vous. à la fois sur la toile ?
    Je veux dire, si vous voulez dessiner un cercle sur l'image , vous devez dessiner à la fois (l'image et le cercle), avec de la toile (pas avec la balise HTML).

    OriginalL'auteur Narek Hayrapetyan