javascript - How to draw a background image on an HTML5 canvas

I'm working on my first HTML5 Canvas game. I am trying to put in a background image, and I don't know how to do it. The game will change backgrounds throughout levels, but I think I understand how to make that happen. However, if I just try to draw an image, then it appears above my title text. Any ideas how to fix this? I don't think the CSS method will work, because the background will change. Here is my code:

<!DOCTYPE html>
<html>
<head>
  <title>How Well Do You Know Your Swedish?</title>
</head>
<body>
  <canvas width="640" height="480" id="game" style="display: block; margin-left: auto;         margin-right: auto; border: 1px solid black;" Your Browser is not patible with this game. We remend Google Chrome, Mozilla Firefox, or Opera.></canvas>
  <script>
    var game_canvas = document.getElementById("game");
    var game_context = game_canvas.getContext("2d");
    var swedishflagbg = new Image();
    swedishflagbg.src = "resources/images/swedishflagbg.png";
    swedishflagbg.onload = function() {
      game_context.drawImage(swedishflagbg, 0, 0);
    }
    game_context.fillStyle = "#000000";
    game_context.font = "35px Ubuntu";
    game_context.textAlign = "center";
    game_context.textBaseline = "top";
    game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
  </script>
</body>
</html>

I am new to JavaScript, and even newer to the HTML5 Canvas.

<!DOCTYPE html>
<html>
<head>
  <title>How Well Do You Know Your Swedish?</title>
</head>
<body>
  <canvas width="640" height="480" id="game" style="display: block; margin-left: auto;         margin-right: auto; border: 1px solid black;" Your Browser is not patible with this game. We remend Google Chrome, Mozilla Firefox, or Opera.></canvas>
  <script>
    var game_canvas = document.getElementById("game");
    var game_context = game_canvas.getContext("2d");
    var swedishflagbg = new Image();
    swedishflagbg.src = "resources/images/swedishflagbg.png";
    swedishflagbg.onload = function() {
      game_context.drawImage(swedishflagbg, 0, 0);
    }
    game_context.fillStyle = "#000000";
    game_context.font = "35px Ubuntu";
    game_context.textAlign = "center";
    game_context.textBaseline = "top";
    game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
  </script>
</body>
</html>

I am new to JavaScript, and even newer to the HTML5 Canvas.

Share Improve this question edited Dec 12, 2019 at 14:36 Gander 2,0011 gold badge25 silver badges32 bronze badges asked Nov 30, 2014 at 5:13 Republican31 71 gold badge2 silver badges9 bronze badges

1 Because the background is drawn in an onload event, while your text is drawn immediately. You can put text drawing in the onload event too, but IMO a better solution would be to use two canvas, one for background and one for foreground, and use CSS to place them accordingly. – Passerby Commented Nov 30, 2014 at 5:44
@Passerby: Perhaps expand your ment and post it as an answer since you've answered the question (+1). Since the background is extremely static you might use an image rather than a background canvas (mobile devices are slower at handling canvas elements, so having 1 image + 1 canvas would likely be better). – markE Commented Nov 30, 2014 at 5:54

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

Extending from ment:

The "why":

Because the background image is drawn in an onload event, which will happen "later", while text is drawn immediately.
So the text is drawn first, and then sometimes later the image is drawn, thus causing the text to be covered.

The "how":

Depending on how "dynamic" the background image is, you can consider:

use CSS background-image on cancas/canvas container, and use className/classList to switch between different backgrounds;
put an <img> tag underneath the canvas, and change its src property;
use an additional "background" canvas underneath the current one, so you can draw the game content in current one, and draw the (probably not frequently-updated) background in the new one.

Credit of idea 1 and 2 goes to @markE :)

First things:

Check the size of your image. It should be equivalent to the size of the canvas.
context.drawImage can also take width and height parameter for the image.

Syntax: context.drawImage(img, x, y, width, height);

After editing, it should look like this

let game_canvas = document.getElementById("game");
let game_context = game_canvas.getContext("2d");
let swedishflagbg = new Image();
swedishflagbg.src = "resources/images/swedishflagbg.png";
swedishflagbg.onload = function() {
    game_context.drawImage(swedishflagbg, 0, 0, game_canvas.width, game_canvas.height);
}
game_context.fillStyle="#000000";
game_context.font="35px Ubuntu";
game_context.textAlign="center";
game_context.textBaseline="top";
game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);

To anyone who is still facing the problem of background image overlaying text (Image above text), I thought "why not drawing text inside onload function after loading bg image!?"

And it worked!! The browser (Or whatever) loads image first and load my text above image.

<canvas width="534" height="104" id="game" style="display: block; margin-left: auto;  margin-right: auto; border: 1px solid black;" Your Browser is not patible with this game. We remend Google Chrome, Mozilla Firefox, or Opera.></canvas>
  <script>
    let game_canvas = document.getElementById("game");
    let game_context = game_canvas.getContext("2d");
    let swedishflagbg = new Image();
    swedishflagbg.src = "./img/logo1.png";
    swedishflagbg.onload = function() {     
    game_context.drawImage(swedishflagbg, 0, 0, game_canvas.width, game_canvas.height);
    game_context.fillStyle = "#000000";
    game_context.font = "35px Ubuntu";
    game_context.textAlign = "center";
    game_context.textBaseline = "top";
    game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
    }
    
  </script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to draw a background image on an HTML5 canvas - Stack Overflow

3 Answers 3

The "why":

The "how":