Add canvas 2d clearing system

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

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)
+}

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'