How to drag an image and drop it inside a canvas

I'm trying to drag and drop some images inside my canvas. It lets me drag it but when i want to drop it doesn't work. Here's the code:

<div class="container">
    <div class="components">
        <div id="components_circuit">
            <h3 class ="h3_componenti" id ="h3_componenti_circuit">Componenti:</h3>
            <ul id="components_circuit_border">
                <li><img id ="component_circuit_resistor" src="images/circuit_resistor.png" height="50"></li>
                <li><img id = "component_circuit_condensator" src="images/circuit_condensator.png" height="50" draggable="true"></li>
                <li><img id="component_circuit_transistor" src="images/circuit_transistor.png" height="50" draggable="true"></li>
                <li><img id="component_circuit_alimentator" src="images/circuit_alimentator.png" height="50" draggable="true"></li>
            </ul>
            <canvas id = "canvas"></canvas>
        </div>
    </div>
</div>

This is an example of HTML as you can see I have my images that I want to drop in my canvas. Here is the JavaScript of the canvas:

const draggableClass = document.getElementsByClassName("draggable");
const draggable = document.querySelectorAll(".draggable");
const container = document.querySelectorAll(".container");

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 1500;
canvas.height = 855;
canvas.style.backgroundColor = "lightgrey";
canvas.style.borderRadius = "10px";
canvas.style.marginLeft = "auto";
canvas.style.marginRight = "auto";
canvas.style.display = "block";

from How to drag an image and drop it inside a canvas