I am currently having issues with displaying images in the HTML canvas. I am still new and I am quite tired so its likely theres somthing stupid I did not do. Heres the code:
JavaScript
x
12
12
1
const canvas = document.getElementById("canvas");2
const ctx = canvas.getContext("2d");3
4
canvas.height = 695;5
canvas.width = 1515;6
7
//Images8
9
const BG = new Image();10
BG.src = "C:UsersMSIDocumentsABGG RemasteredStartImg.png"11
12
ctx.drawImage(BG, 0, 0);JavaScript
1
18
18
1
<!DOCTYPE html>2
<html>3
4
<body>5
<canvas id="canvas"></canvas>6
7
<script src="C:UsersMSIDocumentsABGG RemasteredmainScript.js">8
</script>9
10
<style>11
canvas {12
border: 1px solid;13
}14
</style>15
16
</body>17
18
</html>Thanks for the help!
Advertisement
Answer
Loading an image is not instantly so you need to wait for it to be loaded first which you can do with the onload function of the image
JavaScript
1
12
12
1
const canvas = document.getElementById("canvas");2
const ctx = canvas.getContext("2d");3
4
canvas.height = 695;5
canvas.width = 1515;6
7
//Images8
9
const BG = new Image();10
BG.src = "https://images3.alphacoders.com/899/thumb-1920-899727.jpg"11
12
BG.onload = () => {ctx.drawImage(BG, 0, 0);}JavaScript
1
18
18
1
<!DOCTYPE html>2
<html>3
4
<body>5
<canvas id="canvas"></canvas>6
7
<script src="C:UsersMSIDocumentsABGG RemasteredmainScript.js">8
</script>9
10
<style>11
canvas {12
border: 1px solid;13
}14
</style>15
16
</body>17
18
</html>