Question

How can I draw a droppable image into a canvas.

I know I should use :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("image");
ctx.drawImage(img,//drop x position ,//drop y position);

Can I achieve this using jquery

Answer 1

Updated demo with position correction: http://jsfiddle.net/techfoobar/VFZ4m/2/

---

Yes, you can do this. Check this demo: http://jsfiddle.net/techfoobar/VFZ4m/1/

Note that you’ll need to fine tune the x, y where image is drawn on the canvas.

HTML:

<img id="x" src="image.png">
<canvas id="c" width="200" height="200">

JS:

$('#x').draggable();
$('#c').droppable({
    drop: function(event, ui) {
        var img = ui.draggable;
        var ctxt =$("#c")[0].getContext("2d");
        var offs = $("#c").offset();
        ctxt.drawImage(img[0], event.pageX - offs.left, event.pageY - offs.top);
        return false;
    }
});