How can I use a background image on a canvas?

Question

I found this code

http://jsfiddle.net/dtrooper/AceJJ/

and I'm trying to add a background image to the canvas (so it won't be black).

I've added these lines to the $(document).ready function

var background = new Image();
background.src = url("img/header.jpg");

But all I get is Uncaught SyntaxError: Unexpected token ILLEGAL

I also want to have text on top of the background (saying something like "Welcome to the new year" + NewLine + "Be safe and good luck"

Thank You

Answer 1

In the loop function change this:

// clear canvas
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

To this:

context.save();
if (first) { // only the first time you draw the full image
  first = false;
  context.globalAlpha = 1;
} else {
    context.globalAlpha = 0.2; // <--- PLAY WITH THIS FOR BETTER EFFECT
}
context.drawImage(img, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
context.restore()


// clear canvas
//context.fillStyle = "rgba(0, 0, 0, 0.05)";
//context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

And out of the loop function add this:

var img = new Image();
var first = true;
img.src = "YOUR_IMAGE_URL";

Is not perfect, but from here you can find your solution.

The example: http://jsfiddle.net/AceJJ/1748/

Answer 2

jsFiddle : https://jsfiddle.net/CanvasCode/6ju8acro/1/

javascript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image();
img.src = "http://imagesci.com/img/2013/03/cute-christmas-dogs-8313-hd-wallpapers.jpg";

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  ctx.font = '40pt Calibri';
  ctx.fillStyle = 'red';
  ctx.fillText("Welcome to the new year", 250, 100);
  ctx.fillText("Be safe and good luck", 350, 600);
}

You have to create a new Image variable and then access its property src which is the source of the image. So you first create a new Image provide a source. Then we must first wait for the image to load. Once the image has loaded we render it to the canvas via drawImage , then we go ahead and draw some text using the fillText function.

You will have to work out how to centre the text correctly and change the image but the code I have provided should get you started :)

Updated

jsFiddle : http://jsfiddle.net/CanvasCode/AceJJ/1743/

// clear canvas
// Render background and text first
context.drawImage(img, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
context.font = '40pt Calibri';
context.fillStyle = 'red';
context.fillText("Welcome to the new year", 150, 100);
context.fillText("Be safe and good luck", 250, 600);
//context.fillStyle = "rgba(0, 0, 0, 0.05)";
//context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

Just render the image and text in the loop function, however as I stated above you will need to work out the best way to render the image and text

Another Update

jsFiddle : http://jsfiddle.net/CanvasCode/AceJJ/1756/

To draw the firework trails over the image, just create particles when the rocket is rendered like so

  // ... near the end of the Rocket.prototype.render function
  c.fill();
  c.restore();

  var particle = new Particle(this.pos);

  particle.size = 10;

  particle.gravity = 0.2;
  particle.resistance = 0.92;
  particle.shrink = Math.random() * 0.05 + 0.93;

  particle.flick = true;
  particle.color = this.explosionColor;

  particles.push(particle);
};

Answer 3

Try this :

var img = new Image();
img.src = "http://imgurl.com";

url() is used in CSS.