Set Background Color in EaselJS with JavaScript

EaselJS is a powerful library that makes it easy to work with HTML5 canvas. In this tutorial, we will learn how to set the background color of a canvas using EaselJS with JavaScript.

Set Up

Before we start, make sure you have EaselJS installed and a canvas element on your page. You can install EaselJS using npm or include the library from a CDN.

Next, create a new stage and add it to your canvas:

var stage = new createjs.Stage("canvas");

Change Background Color

To change the background color of the canvas, we will use the createjs.Shape class to draw a rectangle that covers the entire canvas area.

var bg = new createjs.Shape();
bg.graphics.beginFill("#FF0000").drawRect(0, 0, stage.canvas.width, stage.canvas.height);
stage.addChild(bg);
stage.update();

In the code above, we create a new Shape object called bg. We set the fill color of the rectangle to red using the beginFill method and draw a rectangle that covers the entire canvas using the drawRect method. We then add the rectangle to the stage using the addChild method and update the stage using the update method.

The beginFill method takes a color parameter in hexadecimal format. You can replace #FF0000 with the color of your choice.

Conclusion

You now know how to change the background color of a canvas using EaselJS with JavaScript. Remember to always update the stage after making changes to ensure that they are visible.