Backgrounds in TCJSgame

In TCJSgame v3, backgrounds are controlled directly through the Display class. Unlike drawing shapes or images manually, background styles in TCJSgame are set using built-in helper methods that apply CSS to the canvas element. This makes it easy to switch colors, gradients, and borders without having to manage extra drawing logic.

The most common method is display.backgroundColor(color), which fills the canvas background with a solid color. You can also use display.lgradient(to, c1, c2) to apply a linear gradient, or display.rgradient(c1, c2) to apply a radial gradient. These functions take CSS-compatible color values, meaning you can use named colors ("red"), hex codes ("#3498db"), or even RGBA values for transparency.

Examples

// Create a display
let display = new Display();
display.start(600, 400);

// Solid background color
display.backgroundColor("lightblue");

// Linear gradient (top to bottom)
display.lgradient("bottom", "skyblue", "darkblue");

// Radial gradient (center outward)
display.rgradient("yellow", "orange");

// Add a border
display.borderStyle("solid");
display.borderColor("black");
display.borderSize("5px");
    

These styles persist throughout the game unless you change them again. You can even combine background styles with other features like TileMaps or Sprites. For example, setting a gradient background while still drawing animated sprites on top creates depth and improves the game’s visual design.