HTML canvas displays image below canvas instead of inside canvas

Question

I am trying to display a background image inside HTML5 canvas. I have made sure that the image and the html file are in the same folder, therefore, the image is displaying. I have also tried to resize the image in order to make sure the image is not too large for the canvas, however, the image keeps displaying under the canvas instead of inside the canvas. My code is below:

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <title>Opening screen</title>
</head>
<body>
<img>
<canvas id="canvas"
        style =
                "width: 700px;
                 height: 500px;
                 border: 1px solid #000000;
                 padding-left: 0;
                 padding-right: 0;
                 margin-top: 40px;
                 margin-left: auto;
                 margin-right: auto;
                 display: block;">
</canvas>
<img id="sky"  src="sky.png">
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("sky");
    ctx.drawImage(img, 10, 10);
</script>
</body>
</html>

score 3 · Answer 1 · answered Jan 02 '19 at 10:43

The image hasn't loaded/downloaded by the time you're trying to insert it into the canvas.

You can add your code to the window.onload function and it should work

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("sky");
    ctx.drawImage(img, 10, 10);
}

As for why it's displaying below your canvas, you have an img element with that image in, placed after the canvas.

score 2 · Answer 2 · answered Jan 02 '19 at 10:41

2

Add this to your script- Draw the image to the canvas after it has loaded.

var background = new Image();
background.src = "www.xyz.com/background.png";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
    ctx.drawImage(background,0,0);   
}

answered Jan 02 '19 at 10:41

ellipsis

12,049
2
17
33

Ok, so the image is inside the canvas. Thnaks. Is there a function where the image can be resized so it fits perfectly inside the canvas if the image is too big? Instead of playing around with the width and height parameters of `.drawImage` – Barry B Benson Jan 02 '19 at 10:46
Refer this answer-https://stackoverflow.com/questions/23104582/scaling-an-image-to-fit-on-canvas – ellipsis Jan 02 '19 at 10:48

score 2 · Accepted Answer · answered Jan 02 '19 at 10:46

you can remove your img tags and set background for your canvas

<canvas id="canvas"
        style =
                "width: 700px;
                  background: url(https://placekitten.com/1000/1000) no-repeat top center;
                  background-size:cover;
                 height: 500px;
                 border: 1px solid #000000;
                 padding-left: 0;
                 padding-right: 0;
                 margin-top: 40px;
                 margin-left: auto;
                 margin-right: auto;
                 display: block;">
</canvas>

score 0 · Answer 4 · answered Sep 30 '21 at 11:47

Actually the image element you have created will be rendered below the canvas as the canvas is always rendered above all the elements. There is a way to place the image tag above the canvas, but it will hide the other stuffs that you draw on the canvas, so make use of the graphicsContext.drawImage() function.

var canvas = document.getElementById("canvas-id");
//graphics context
var ctx = canvas.getContext("2d");
var backgroundImage = new Image();
backgroundImage.src = "path-to-the-background-image-file/bgi.png";
backgroundImage.onload = function() {

ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.width);

}

HTML canvas displays image below canvas instead of inside canvas

4 Answers4