I've been trying to display a picture of myself on my html canvas, the image is stored in the correct folder. However, I keep encountering a strange error (shown above) and I can't seem to figure out what's causing it. If you have any insights, please share them with me. Here is the code snippet I'm working with:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0,0,800,500)
var img = new Image();
img.src = "science.PNG";
img.onload = function() {
context.drawImage(img, 145, 145);
};
</script>
</body>
</html>