Change gradient to background image?

Willir

Willir

Willir

Associate
Joined
28 Jul 2014
Posts
694
Location
Liverpool
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.
 
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';
 
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.
 
You must log in or register to reply here.
Back
Top Bottom