My current issue involves adding an Image to my webpage. However, every time I hit the refresh button, the image disappears. After researching on Stack Overflow, it was suggested to include window.onload=yourDrawFunction() in the code. Despite following this advice and naming my function 'draw', the problem persists. Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Transformation Demo</title>
<style type="text/css">
.hidden{
display: none;
}
</style>
</head>
<body>
<h1>Tranformation Demo</h1>
<img class = "hidden" id="goku" width="220" height="277" src="goku.jpg" alt="Goku Pic">
<canvas id="surface" width=400 height=400>
Your browser doesn't support canvas tag.
</canvas>
<script>
function draw(){
var drawing=document.getElementById("surface");
var con=drawing.getContext("2d");
var gokupic=document.getElementById("goku");
con.save();
con.translate(100,100);
con.rotate(Math.PI / 4);
con.scale(3.0,1.5);
con.drawImage(gokupic, -25,-25,50,50);
con.restore();
con.strokeStyle="red";
con.lineWidth=5;
con.strokeRect(0,0,200,200);
}
window.onload=draw();
</script>
</body>
</html>
Thank you for any help provided.
After experimenting, I found that simply using the window.onload function without naming a separate draw function works perfectly fine. This leads me to wonder why this method functions while utilizing the draw() function does not produce the desired result?