Php: dragging images into canvas from the mysql server cannot be used for editing

See more:

Javascript

PHP

Ajax

MySQL

Canvas

I have this error in the console.log which says:

Uncaught TypeError: Cannot read property 'width' of null at HTMLDivElement.handleDrop

In this process I access the images data by filtering it using a drop-down list and view it in the div element. I have no problem with this but only when using it in the canvas.
I do not have any idea why this is happening but it may have something to do with fetching images in the server. Thanks in advance for your time and effort.


THIS IS THE PROCESS I HAVE MADE:

1. Creating a function to fetch data to server without page reloading and redirecting the page using PHP-AJAX. this is place in the HTML head element. Source code from W3schools.com on PHP category

<script>
		function showUser(str) {
			if (str=="") {
			    document.getElementById("txtHint").innerHTML="";
			    return;
			} 
			if (window.XMLHttpRequest) {
			    // code for IE7+, Firefox, Chrome, Opera, Safari
			    xmlhttp=new XMLHttpRequest();
			} else { // code for IE6, IE5
			    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function() {
				if (this.readyState==4 && this.status==200) {
				    document.getElementById("txtHint").innerHTML=this.responseText;
				}
			}
			xmlhttp.open("GET","getImage.php?q="+str,true);
				xmlhttp.send();
		}
</script>

2. Placing the function in the select element inside the form element. This is placed inside the body element

<form>
				<select id = "objects" name="users" onchange="showUser(this.value)">
		    		<option value="">Select Category</option>
		    		<option value="City">City</option>
		    		<option value="Animals">Animals</option>
		    		<option value="Town">Town</option>
		    		<option value="Home">Home</option>
		    		<option value="Park">Park</option>
		  		</select>
</form>

3. Creating a div inside the body to place the target path for viewing images from database result

<div class = "images"><div class = "a"  id="txtHint">Image Category</div></div>

4. This is the getImage.php code for fetching data from database

<?php
$query = mysqli_connect("localhost","root","","imagecategory");
// Check connection
if (mysqli_connect_errno()){echo "Failed to connect to MySQL: " . mysqli_connect_error();}
mysqli_select_db($query, 'imgDropdown');

$q = $_GET['q'];
$sql="SELECT * FROM tbl_uploadimg WHERE imgCategory = '".$q."'";
$result2 = mysqli_query($query,$sql);

while($row = mysqli_fetch_array($result2)) {
    echo '<img draggable="true" src="uploads/'.$row["imgUrl"].'">';
}
mysqli_close($query);
?>

5. lastly this is the picture of my sql code. Database name: imageCategory on table tbl_uploadimg

<img alt="IMG example" src="https://ibb.co/mcnMSb" />

What I have tried:

Sorry but unfortunately I do not have any solution on this