Почему я не могу нарисовать изображение на холсте?

У меня есть холст и div с уменьшенными изображениями. Я хочу перетащить один из уменьшенных изображений в холст. Когда изображение нажимается, src следует сохранить так, чтобы, если это изображение упало в холст, я получаю рисунок в исходном масштабе. По какой-то причине этот код не работает...

HTML

<div id="LeftColumn">
    <canvas id="Canvas">
    </canvas>
</div>

<div id="TextureViewInside">
    <ul class="products">
        <img onclick="getSource(this.src)" id="firstPic" src="FärgadePapper.png">
            <img src="Hajar.png">
            <img src="Labyrint.png">
            <img src="Martini.png">
            <img src="FärgadePapper.png">
    </ul>
</div>

Javascript

function first(){
    canvas = document.getElementById('Canvas');
    var ctx = canvas.getContext("2d");
    canvas.addEventListener("dragenter", function(e){e.preventDefault();}, false);
    canvas.addEventListener("dragover", function(e){e.preventDefault();}, false);
    canvas.addEventListener("drop", dropped, false);
}
function getSource(scr){
    alert(src);
    a = new image();
    a.src = src;
}
function dropped(){
    canvas.drawImage(a, 0, 0);
}
window.addEventListener("load", first, false);