HTML5 Canvas as CSS Background-Image

HTML5 Canvas background image

Theres a few ways you can do this. You can either add a background to the canvas you are currently working on, which if the canvas isn't going to be redrawn every loop is fine. Otherwise you can make a second canvas underneath your main canvas and draw the background to it. The final way is to just use a standard <img> element placed under the canvas. To draw a background onto the canvas element you can do something like the following:

Live Demo

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = 903;
canvas.height = 657;

var background = new Image();
background.src = "http://www.samskirrow.com/background.png";

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

// Draw whatever else over top of it on the canvas.

Use canvas as a CSS background

This has been possible in WebKit since 2008, see here.

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
 </style>

 <script type="application/x-javascript">
function draw(w, h) {
 var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
 </script>
 </head>
 <body onload="draw(300, 300)">
   <div></div>
 </body>

</html>

Currently, Firefox 4 contains a feature, which allows you to use any element (including canvas) as a CSS background, in this fashion:

<p id="myBackground1" style="background: darkorange; color: white;  width: 300px; height: 40px;">
  This element will be used as a background.
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
  This box uses #myBackground1 as its background!
</p>

See Mozilla hacks for specifics.

Background image javascript HTML5 canvas

I believe that you may be trying to use the background image before has complted loading but you can also use these approaches with CSS.

You can use CSS and either define in your style block or dynamically set it in JS.

<style>

#gameCanvas{
    background-image:    url(/images/backGround.jpg);
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center;
}
</style>

or if prefer in JS:

document.getElementById("gameCanvas").style.background = "url('/images/backGround.jpg')";

NB - make sure the image is access to the browser.
Also check your console for errors if using JS - the JS may be breaking with an error before reaching your code.
Also for a working example see HTML5 Canvas background image

How to draw a background image on an HTML5 canvas

Extending from comment:

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 :)

html5 canvas, image as background for arch or circle

You can use for example clip() to do this by first defining the clip path using arc(), call clip(), then draw in the two images in each half.

A simple example:

var img1 = new Image, img2 = new Image, count = 0, ctx = c.getContext("2d");img1.onload = img2.onload = go;img1.src = "//i.stack.imgur.com/EU6KB.jpg";img2.src = "//i.stack.imgur.com/UmEA9.jpg";
function go() {  if (++count < 2) return;  // just to make sure both images has loaded    // save state as restoring is the only way to remove a clip-mask  ctx.save();    // define clip-mask using path operations  ctx.arc(75, 75, 75, 0, 6.28);  ctx.clip();    // draw in top image  ctx.drawImage(img1, 0, 0);
  // draw in bottom image  ctx.drawImage(img2, 0, 75);    // remove clip mask  ctx.restore();}

<canvas id=c></canvas>