JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="drag">
    <li class="new-item"><img src = "something" alt = "img"></li>
</ul>

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>

CSS

li{
    font-family:helvetica;
    list-style-type:none;
}

JavaScript

$("li").draggable({
    helper: 'clone'
});
$("#myCanvas").droppable({
    accept: "li",
    drop: function(event,ui){
        var context = $(this)[0].getContext("2d");
        context.font = "16px helvetica";
        /* context.fillText($(ui.draggable).clone().text(),ui.position.left - event.target.offsetLeft,ui.position.top - event.target.offsetTop) */;
	context.drawImage(event.target, event.pageX, event.pageY);
}
});