JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="DropHere" ondrop="drop(event)" ondragover="allowDrop(event)">
</canvas>
<br/>
<img class="imgs" src="http://lorempixel.com/100/100/animals" draggable="true" ondragstart="drag(event)" />

<img class="imgs" src="http://lorempixel.com/100/100/sports" draggable="true" ondragstart="drag(event)" />

<img class="imgs" src="http://lorempixel.com/100/100/cats" draggable="true" ondragstart="drag(event)" />

<!-- many imaging options so I put as class-->

<br/>
<br/>
<input id="text1" type="text" class="text" draggable="true" ondragstart="drag(event)"> Insert text 1 | Font <select id="fontT1">
<option>Arial</option>
<option>Times</option>
<select>
 | size <select id="sizeT1">
<option>10</option>
<option>15</option>
<option>20</option>
<select>  | Color <input id="color1" type="color" />
</br>
<input id="text2" type="text" class="text" draggable="true" ondragstart="drag(event)"> Insert text 2 | Font <select id="fontT2">
<option>Arial</option>
<option>Times</option>
<select> | size <select id="sizeT2">
<option>10</option>
<option>15</option>
<option>20</option></select> | Color <input id="color2" type="color" />

CSS

#DropHere { width:500px; height:300px; padding:10px; border:1px solid #aaaaaa; }

JavaScript

var canvas = document.getElementById("DropHere");
var ctx = canvas.getContext("2d");

ctx.font = "100px arial";
ctx.strokeText("Test", 50, 100);

function allowDrop(ev) {
ev.preventDefault(); 
} 

function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.class); 
} 

function drop(ev) {
var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementByClass(data)); ev.preventDefault();

}