I try to upload and draw an image into a canvas. I have the html code for button and canvas and js code for onchange event. My code does not work and I do not have any errors to figure out what is going on.
1 Answer
The fix is by simply including your scripts at the end of the body before the closing tag </body>.
Your html code will appear like this:
<html>
<body>
<div id="buttonsDiv" >
<input type="file" accept="image/*" title="Upload Image" class="normal-button" id="uploadBtn"/>
</div>
<canvas id= "myImgCanvas" title="Drop an image here to upload" ></canvas>
<script src="myFileName.js"></script>
</body>
</html>
Note that you must pay attention when you should/ should not include your scripts in the <head> tag vs including it at the end of the </body> tag. You can check this post for the best practice.
<head>?<script src="myFileName.js"></script>before the body closing tag </body>