JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Drag the house onto the canvas.<br>
    The house will be drawn on the canvas.</h4>

<img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png">
<br>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
#canvas{border:1px solid red;}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;

var image1=new Image();
image1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";

var $house=$("#house");
var $canvas=$("#canvas");

$house.draggable({
    helper:'clone',
});
// set the data payload
$house.data("image",image1); // key-value pair

$canvas.droppable({
    drop:dragDrop,
});


function dragDrop(e,ui){
    var element=ui.draggable;
    var data=element.data("url");
    var x=parseInt(ui.offset.left-offsetX);
    var y=parseInt(ui.offset.top-offsetY);
    ctx.drawImage(element.data("image"),x-1,y);
}