From c4871a008e10db260673627c18d15be8da7659d5 Mon Sep 17 00:00:00 2001
From: Pavle Goloskokovic <pgoloskokovic@gmail.com>
Date: Tue, 24 Dec 2024 15:18:30 +0100
Subject: [PATCH] CanvasRenderer initial bg color draw on Game boot

---
 src/renderer/canvas/CanvasRenderer.js | 31 +++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/renderer/canvas/CanvasRenderer.js b/src/renderer/canvas/CanvasRenderer.js
index 08c34b9706..53f890bcb0 100644
--- a/src/renderer/canvas/CanvasRenderer.js
+++ b/src/renderer/canvas/CanvasRenderer.js
@@ -14,6 +14,7 @@ var Events = require('../events');
 var GetBlendModes = require('./utils/GetBlendModes');
 var ScaleEvents = require('../../scale/events');
 var TextureEvents = require('../../textures/events');
+var GameEvents = require('../../core/events');
 var TransformMatrix = require('../../gameobjects/components/TransformMatrix');
 
 /**
@@ -54,7 +55,8 @@ var CanvasRenderer = new Class({
             clearBeforeRender: gameConfig.clearBeforeRender,
             backgroundColor: gameConfig.backgroundColor,
             antialias: gameConfig.antialias,
-            roundPixels: gameConfig.roundPixels
+            roundPixels: gameConfig.roundPixels,
+            transparent: gameConfig.transparent
         };
 
         /**
@@ -113,8 +115,8 @@ var CanvasRenderer = new Class({
         this.gameCanvas = game.canvas;
 
         var contextOptions = {
-            alpha: game.config.transparent,
-            desynchronized: game.config.desynchronized,
+            alpha: gameConfig.transparent,
+            desynchronized: gameConfig.desynchronized,
             willReadFrequently: false
         };
 
@@ -143,7 +145,7 @@ var CanvasRenderer = new Class({
          * @type {boolean}
          * @since 3.20.0
          */
-        this.antialias = game.config.antialias;
+        this.antialias = gameConfig.antialias;
 
         /**
          * The blend modes supported by the Canvas Renderer.
@@ -226,7 +228,24 @@ var CanvasRenderer = new Class({
      */
     init: function ()
     {
-        this.game.textures.once(TextureEvents.READY, this.boot, this);
+        var game = this.game;
+
+        game.events.once(GameEvents.BOOT, function ()
+        {
+            var config = this.config;
+
+            if (!config.transparent)
+            {
+                var ctx = this.gameContext;
+                var gameCanvas = this.gameCanvas;
+
+                ctx.fillStyle = config.backgroundColor.rgba;
+                ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
+            }
+
+        }, this);
+
+        game.textures.once(TextureEvents.READY, this.boot, this);
     },
 
     /**
@@ -787,7 +806,7 @@ var CanvasRenderer = new Class({
             gx = Math.floor(gx);
             gy = Math.floor(gy);
         }
-    
+
         spriteMatrix.applyITRS(gx, gy, sprite.rotation, sprite.scaleX * flipX, sprite.scaleY * flipY);
 
         camMatrix.copyFrom(camera.matrix);