lets see if this one can help you
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drop(ev)
{
ev.preventDefault();
var textToDraw=ev.dataTransfer.getData("Text");
var ctx=document.getElementById("canv1").getContext("2d");
ctx.font = 'italic 15pt Calibri';
ctx.fillText(textToDraw,10,50);
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<canvas id="canv1" style="border:1px solid black" ondrop="drop(event)" öndragover="allowDrop(event)"></canvas>
</body>
</html>