JSFiddle - React, Tailwind, and code Playground

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://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/32x32/houses.png">
<img id="hole" width=32 height=32 src="https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/32x32/hole_punch.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();
var image2=new Image();
image1.src = "https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/32x32/houses.png";
image2.src = "https://d1nhio0ox7pgb.cloudfront.net/_img/g_collection_png/standard/32x32/hole_punch.png";

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

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

$house.draggable({
    helper:'clone',
});
$hole.draggable({
    helper:'clone',
});
// set the data payload
$house.data("image",image1); // key-value pair
$hole.data("image",image2); // 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);
}