JSFiddle - React, Tailwind, and code Playground

HTML

<img id="x" src="http://www.kidzui.com/images/layout/spaceship/star-orange-full.png">
<canvas id="c" width="200" height="200">

CSS

body {
padding: 20px;    
}
#x {
border: 1px solid green;
    cursor: move;
}
#x, #c {
display: block;
clear: both;
}
#c {
margin-top: 30px;
border: 1px solid red
}

JavaScript

$('#x').draggable();
$('#c').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;
    }
});