From 82a148c3937b61aaa91aa1af567c92538dccf049 Mon Sep 17 00:00:00 2001
From: waynemwashuma <94756970+waynemwashuma@users.noreply.github.com>
Date: Wed, 27 May 2026 16:24:35 +0300
Subject: [PATCH 1/2] Add system to clear canvas

---
 src/render-canvas2d/systems/clear.js | 27 +++++++++++++++++++++++++++
 src/render-canvas2d/systems/index.js |  3 +--
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/render-canvas2d/systems/clear.js

diff --git a/src/render-canvas2d/systems/clear.js b/src/render-canvas2d/systems/clear.js
new file mode 100644
index 00000000..09f0e0c1
--- /dev/null
+++ b/src/render-canvas2d/systems/clear.js
@@ -0,0 +1,27 @@
+/** @import {SystemFunc} from '../../ecs/index.js' */
+import { Entity, Query } from '../../ecs/index.js'
+import { warn } from '../../logger/index.js'
+import { MainWindow, Windows, Window } from '../../window/index.js'
+
+/**
+ * Clears the active canvas2d frame before the main render systems run.
+ *
+ * @type {SystemFunc}
+ */
+export function clearCanvas2d(world) {
+  const windows = new Query(world, [Entity, Window, MainWindow])
+  const canvases = world.getResource(Windows)
+  const window = windows.single()
+
+  if (!window) return warn('Please define the main window before.')
+
+  const canvas = canvases.getWindow(window[0])
+
+  if (!canvas) return
+
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) return warn('2d context could not be created on the canvas.')
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+}
diff --git a/src/render-canvas2d/systems/index.js b/src/render-canvas2d/systems/index.js
index da91161b..cf6f8257 100644
--- a/src/render-canvas2d/systems/index.js
+++ b/src/render-canvas2d/systems/index.js
@@ -49,8 +49,6 @@ export function genrender(type, renderMaterial) {
 
     if (!ctx) return warn('2d context could not be created on the canvas.')
 
-    // TODO: Return when this becomes default rendering system
-    // ctx.clearRect(0, 0, canvas.width, canvas.height)
     cameras.each(([cameraTransform, renderList, camera]) => {
       const view = GlobalTransform2D.invert(cameraTransform)
 
@@ -117,4 +115,5 @@ export function genrender(type, renderMaterial) {
   }
 }
 
+export * from './clear.js'
 export * from './types.js'

From 078202fa3b03680dfb2558dcc3cf2ba42dec3c9e Mon Sep 17 00:00:00 2001
From: waynemwashuma <94756970+waynemwashuma@users.noreply.github.com>
Date: Wed, 27 May 2026 16:30:01 +0300
Subject: [PATCH 2/2] Integrate the system into plugin

---
 src/render-canvas2d/plugin.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/render-canvas2d/plugin.js b/src/render-canvas2d/plugin.js
index f0be06cf..b38340f9 100644
--- a/src/render-canvas2d/plugin.js
+++ b/src/render-canvas2d/plugin.js
@@ -1,9 +1,9 @@
 import { App, Plugin } from '../app/index.js'
-import { AppSchedule } from '../core/index.js'
+import { AppSchedule, CoreSystems } from '../core/index.js'
 import { TextureCache, BasicMaterial } from '../render-core/index.js'
 import { renderBasicMaterial } from './core/index.js'
 import { Canvas2DMaterialPlugin } from './plugins/index.js'
-import { registerCanvas2DTypes } from './systems/index.js'
+import { clearCanvas2d, registerCanvas2DTypes } from './systems/index.js'
 
 export class Canvas2DRendererPlugin extends Plugin {
 
@@ -14,6 +14,11 @@ export class Canvas2DRendererPlugin extends Plugin {
     app
       .setResource(new TextureCache())
       .registerSystem({ schedule: AppSchedule.Startup, system: registerCanvas2DTypes })
+      .registerSystem({
+        schedule: AppSchedule.Update,
+        systemGroup: CoreSystems.Start,
+        system: clearCanvas2d
+      })
       .registerPlugin(new Canvas2DMaterialPlugin({
         material:BasicMaterial,
         update:renderBasicMaterial