Mouse coord (user help)

by Yining Shi

HTML

<canvas style="margin:0;padding:0;position:absulte;left:0px;top:0px;border:1px solid #000000;" id="imgCanvas" width="550" height="550"></canvas>
<img style="visibility: hidden" id="scream" width="120" height="120" src="http://emojipedia-us.s3.amazonaws.com/cache/da/9a/da9a6ebb42175c47ef3bcbbb84716e49.png" alt="The Scream">

JavaScript

var canvas = document.getElementById("imgCanvas");
var context = canvas.getContext("2d");
var img = document.getElementById("scream");
var imgSize = 30;
var candraw = false;
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 toggleDraw(){
	candraw = !candraw;
}
function draw(e) {
if(candraw){
    var pos = getMousePos(canvas, e);
    posx = pos.x;
    posy = pos.y;
    context.fillStyle = "#000000";
    context.drawImage(img, posx-imgSize/2, posy-imgSize/2, imgSize, imgSize);
   }
}
window.addEventListener('mousedown', toggleDraw, false);
window.addEventListener('mousemove', draw, false);
window.addEventListener('mouseup', toggleDraw, false);

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