Search code examples
javascripthtmlcanvasmouseinteraction

I can't draw my background. - HTML Canvas Game

So, in my code, under the draw function, I have bg.draw(); commented out.

    function draw() {
        clearAllCtx();
        player.draw();
        enemy.draw();
        //bg.draw();
    }

When I try to uncomment it, the image doesn't appear, and mouse interaction does not work. Any help would be appreciated!!

Here's a jsFiddle.

Solution

  • I edited the fiddle with the corrections: http://jsfiddle.net/GVcPu/4/

    • The entities canvas should be transparent to allow the background to be seen: style="background: transparent"

    • Be careful with the order of the parameters: bg = new Background(bgImg,0,0); and function Background(xpos, ypos, imgsrc){

    • Be careful with the name of the variables: ctxBg.drawImage(this.imagesrc, this.xpos, this.ypos); where the variable is actually called this.imgsrc in this function.

    Hope it helped!