Le dessin d'un cercle rempli dans une toile de clic de souris

Je veux dessiner un rempli (ou non rempli) cercle dans une toile de clic de souris, mais je ne peux pas obtenir mon code fonctionne correctement, j'ai essayé à peu près tout!

C'est mon code HTML:

<div id="images"></div>
<canvas style="margin:0;padding:0;position:relative;left:50px;top:50px;" id="imgCanvas" width="250" height="250" onclick="draw(e)"></canvas>

et mon script actuel:

var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");

function createImageOnCanvas(imageId) {
    canvas.style.display = "block";
    document.getElementById("images").style.overflowY = "hidden";
    var img = new Image(300, 300);
    img.src = document.getElementById(imageId).src;
    context.drawImage(img, (0), (0)); //onload....
}

function draw(e) {
    var pos = getMousePos(canvas, e);
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = "#000000";
    context.arc(posx, posy, 50, 0, 2 * Math.PI);
}

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

Le code fonctionne très bien si et seulement si je supprime le "use strict"; mais, dans cette tâche, j'ai à faire un code qui fonctionne même avec elle, c'est mon problème.

Ici est la jsFiddle

InformationsquelleAutor Davy Karlsson | 2013-12-11
  1. 16

    Résolu moi-même.

    function draw(e) {

    var canvas = document.getElementById("imgCanvas");
    var context = canvas.getContext("2d");
    var rect = canvas.getBoundingClientRect();
    var posx = e.clientX - rect.left;
    var posy = e.clientY - rect.top;

    context.fillStyle = "#000000";
    context.beginPath();
    context.arc(posx, posy, 50, 0, 2 * Math.PI);
    context.fill();
}

    Ce script fonctionne très bien pour moi.

    InformationsquelleAutor Davy Karlsson