0.2.2 • Public • Published

Canvas Scrolling Background

Manages an infinite scrolling background for your game.

NPM version Known Vulnerabilities npm NPM downloads issues license Gitter


To install this module through npm, simply use the following command:

$ npm install canvas-scrolling-background

and to use it, you can import it as an ES6 module:

// Webpack
import ScrollingBackground from 'canvas-scrolling-background';
// Browser
import ScrollingBackground from './node_modules/canvas-scrolling-background/canvas-scrolling-background.js';

Note: Since it is a default export you can name it whatever you like such as: import Pikachu from 'canvas-scrolling-background';


Since this module expects that you already have a basic framework for your game, unless your game is just a scrolling background, you have to provide the following on initialization:

param type description default
canvas HTMLCanvasElement The canvas to draw the scrolling background on
image string The path to image to use as the background
options Object
options.x number The initial x position of the background on the canvas 0
options.y number The initial y position of the background on the canvas 0
options.direction string The direction the background should scroll (left or right) left

The canvas should already exist and so csb takes a reference to that in order to draw onto the same canvas as the rest of your game.

So let's say that you're making a game similar to the chrome dino runner game that you can play when you don't have a great internet connection. The image for this background can be found at ''

Note: Only left and right scrolling are supported at this time with support for up and down scrolling coming soon.

So we could initialize this as:

// Get the existing canvas.
const canvas = document.getElementById('my-canvas');
// The background should start at a x position of 0 which is default and it should scroll to the left which it does by
// default also. The only thing we want to do is show the background near the bottom of the canvas.
const options = {
  y: canvas.height - 10;
const sb = new ScrollingBackground(options);
// Since the image has to be loaded and that's an asynchronous operation, csb dispatches a signal when the image is
// loaded and the background is ready to be updated.
function start() {
function update() {
  // Your other canvas updates...
  // Runs the background update method to update the position of the background, the speed parameter determines how
  // fast the background scrolls.
  // As any normal game loop, you have to call it on a requestAnimationFrame loop.

So while the example is pretty well commented the one part that might be confusing in the loaded signal. If you're not used to singals just know that they're like events but bound to a property so that they don't rely on loose typing. So for example the loaded signal as an event might look like:

sb.on('loadaed', => {});

So really the signal is like an event being emitted but more strict. Anyways, this signal lets you know that the background image has finished loading and is ready to be used. This is when you provide your update method to csb.


Thanks to @jeremyskelly for helping with the update method.



Package Sidebar


npm i canvas-scrolling-background

Weekly Downloads






Unpacked Size

87.7 kB

Total Files


Last publish


  • robert.corponoi