0

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);
3
  • Your markup with the <ul> around the images isn't really valid, if you care about stuff like that. A <ul> element should have as children only <li> elements.
    – Pointy
    Nov 10, 2013 at 16:38
  • Also, you are probably getting errors in the console. You should always check that and include the errors in your SO questions.
    – Pointy
    Nov 10, 2013 at 16:39
  • i did but nothing came up. The plan is to be able to move the images around in the canvas with the mouse, any suggestions on how to do that? Nov 10, 2013 at 16:58

1 Answer 1

1

Should be new Image(), not "image" with a lower-case "i". Also, you need to use the context and not the canvas directly to draw an image. Also in your getSource() function you called the parameter "scr" but the code in the function calls it "src".

Also you really should explicitly declare "a" somewhere.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.