Change gradient to background image?

Willir · 21 Mar 2016 at 21:24

I am currently coding a game in HTML5 canvas and finding it difficult to change the background gradient of the canvas to a background image for the main menu.

Here is my code for the gradient background:

Code:

if (MainMenu)
{
    var gradient = ctx.createLinearGradient(0, 0, 0, 0);
    gradient.addColorStop (0, "black");
    ctx.fillStyle = gradient;
    ctx.fillRect (0, 0, 1024, 660);
}

Any help would be appreciated, I have tried everything.

spenncerr · 21 Mar 2016 at 21:37

Code:

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'imagesourcehere.png';

Willir · 21 Mar 2016 at 21:42

You Sir are a god, thanks for the quick response, much appreciated.

spenncerr · 21 Mar 2016 at 21:46

Willir said:
You Sir are a god, thanks for the quick response, much appreciated.

No worries bud, did that sort it?

Willir · 21 Mar 2016 at 21:48

spenncerr said:
No worries bud, did that sort it?

The image is now in the canvas as I wanted it to be, but when I press enter to play the game it wont load.

spenncerr · 21 Mar 2016 at 21:49

Can you chuck the full code into a http://codepen.io and I'll have a look-see.

Willir · 21 Mar 2016 at 21:54

spenncerr said:
Can you chuck the full code into a http://codepen.io and I'll have a look-see.

http://codepen.io/Willir29/pen/dMvwOP

Thanks man!

Willir · 21 Mar 2016 at 22:08

I found that changing var ctx to var context had messed with my draw functions, so I changed all ctx to context and it now works. Just need to fix a couple of errors now including, stopping the game running before I press enter and I need to add a retry & game over screen.

spenncerr · 21 Mar 2016 at 22:13

Oh brilliant!

Canvas isn't my strong-suit so I'm glad you fixed it.

Willir · 21 Mar 2016 at 22:15

spenncerr said:
Oh brilliant!

Canvas isn't my strong-suit so I'm glad you fixed it.

Thanks for the help man, I was stuck for ages on my background image problem!