JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=300 height=300 style="border:1px solid black;"></canvas>
<img id="kitten" src="http://placekitten.com/110/110" />
<div>Drag the kitten over the canvas square, then move it again.</div>

JavaScript

$('#kitten').draggable({
    stop: function() {
        var $canvas = $('#canvas') ;
        var ctx = $canvas.get(0).getContext('2d') ;
        var $img = $('#kitten') ;
        var imgpos = $img.offset() ;
        var cpos = $canvas.offset() ;
        ctx.drawImage($img.get(0),imgpos.left-cpos.left,
                      imgpos.top-cpos.top) ;
                     
    }
});