Can't add background image on Canvas

I am building a game that runs on a background image. The image is located at the path ../images/bg.jpg.

-images
  -bg.jpg
-src
  -elements
    - source.js
  - map.js
  - main.js

Now in my map.js, I am going to use the image as a background pattern and make a background for my game.

Here is my code:

In my map, there is an init method where I initialize the background property using

this.background = new Image();

then in the render() method of my map, I do this:

this.ctx.save();
this.background.addEventListener('load', function() {

  var pattern = this.ctx.createPattern(background, 'repeat');
  this.ctx.fillStyle = pattern;
  this.ctx.fillRect(0, 0, 10000, 10000);
});
this.background.src = "../images/bg.jpg";
this.ctx.restore();

In my main.js I call map.render(),

but the map doesn't show a background picture. What is wrong with my code?

EDIT:

Now my code has changed to this:

this.ctx.save();
var drawBackground = function () {
      alert('Hit me');
      var pattern = this.ctx.createPattern(background, 'repeat');
      this.ctx.fillStyle = pattern;
      this.ctx.fillRect(0, 0, 10000, 10000);
    }

    this.background.addEventListener('load', drawBackground, false);
    this.background.src = "../images/bg.jpg";
    this.ctx.restore();

But no miracle has happened and I don't receive the 'Hit me' alert. I am so confused.

NEW EDIT:

It seems to be a path issue which I have managed to resolve by placing the image to the correct folder. This is because I am using webpack plugin with Node.js and the webpack plugin doesn't know where to put my background image in the build folder if I don't tell it specifically.

At last I used a plugin called copy-webpack-plugin to copy my static files to the build directory and then using the stylesheet solution the background image can be displayed.

However this is not the effect I want.

In my game I have a very large background and I want the background look exactly like the ground, as if I drop something on the ground, when I move away, that thing will stay at the same spot of the ground.

But if I set the background image in stylesheet that thing I just dropped will move away from the spot when I move my mouse to the other end of the frame. How can I make the objects stay on the same spot of the background not just the same x and y coordinates? The background image is very small so I am making it displayed repeatedly until it fills the canvas. I guess what I just described can only be achieved by javascript codes?

Here is a picture to explain my thoughts on the expected background:

For example if we look at the picture above, the background image contains a moon, and I have drawn some stars on top of the background. In the left picture my mouse is at the bottom right corner of the screen. Now I move my mouse, and the frame moves too because I want to show how I go to the other end of the canvas. Picture on the right shows my mouse is now at the top right of the frame, which means my mouse has moved towards the top. Now the star and the moon keep their relative positions but their y coordinates should be underneath my mouse's.