I've got a canvas and a div with scaled down images. I want to drag one of the scaled down images into the canvas. When an image is clicked on, the src should be saved so that if that image is dropped into the canvas, i gets drawn in the original scale. For some reason this code doesn't work...
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);