1

I am in a group that is editing source code for an existing Javascript/HTML5 game, and we are attempting to make it into our own game for a group project for school. I am having issues changing the background canvas into an image I found. To my knowledge, this is all of the code given for creating the canvas in the existing code.

    var CANVAS_WIDTH = 320;
    var CANVAS_HEIGHT = 300;

    var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
      "' height='" + CANVAS_HEIGHT + "'></canvas");
    var canvas = canvasElement.get(0).getContext("2d");
    canvasElement.appendTo('body');

The original source code is given from this link: http://www.html5rocks.com/en/tutorials/canvas/notearsgame/

The guy says he is using jquery for the canvas by the way. I have no idea how that effects things. Basically, I'm just trying to change the background image for the game to space or a picture of space. Any help would be appreciated, Thank you!

Bradyrh12
  • 11
  • 2
  • Whatever you do, ignore his recommendation to use setInterval. Use requestAnimationFrame, or setTimeout instead. You will encounter horrible lag issues if you use setInterval for games programming. – ManoDestra Apr 27 '16 at 03:57

1 Answers1

0

you can use css to add a background to the canvas, like this:

<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(spacebackground.jpg) }
</style>

hope it helps you! For further info go to this other stack overflow post: How to set the background image of a html 5 canvas to .png image

Community
  • 1
  • 1
melvazquez
  • 21
  • 5