fix: Switch fallback default + fix bugs in Canvas2D fallback (#2812)

- Changed the canvas 2d fallback default, no longer is enabled by default. Developers must opt in.
- Fix bug in `useCanvas2DFallback()` where `antialiasing` settings could be lost
- Fix bug in `useCanvas2DFallback()` where opacity was not respected in `save()`/`restore()`

CHANGELOG.md

@@ -19,6 +19,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fix bug in `useCanvas2DFallback()` where `antialiasing` settings could be lost
+- Fix bug in `useCanvas2DFallback()` where opacity was not respected in `save
 - Fixed typo in trigger event signature `entertrigger` should have been `enter`
 - Fixed typo in trigger event signature `exittrigger` should have been `exit`
 - Fixed typo in animation event signature `ended` should have been `end`
@@ -35,6 +37,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Changed
 
+- Changed the canvas 2d fallback default, no longer is enabled by default. Developers must opt in.
 - Allow entity names to be set after construction! Entities will now default to a name "Entity#1234" followed by an id.
 
 <!--------------------------------- DO NOT EDIT BELOW THIS LINE --------------------------------->

sandbox/src/game.ts

@@ -49,7 +49,6 @@ var game = new ex.Engine({
   suppressPlayButton: true,
   pointerScope: ex.PointerScope.Canvas,
   displayMode: ex.DisplayMode.FitScreenAndFill,
-  antialiasing: false,
   snapToPixel: false,
   maxFps: 60,
   configurePerformanceCanvas2DFallback: {
@@ -58,6 +57,7 @@ var game = new ex.Engine({
     threshold: { fps: 20, numberOfFrames: 100 }
   }
 });
+game.setAntialiasing(false);
 game.currentScene.onPreDraw = (ctx: ex.ExcaliburGraphicsContext) => {
   ctx.save();
   ctx.z = 99;

src/engine/Engine.ts

@@ -251,7 +251,7 @@ export interface EngineOptions {
    */
   configurePerformanceCanvas2DFallback?: {
     /**
-     * By default `true`, this will switch the internal graphics context to Canvas2D which can improve performance on non hardware
+     * By default `false`, this will switch the internal graphics context to Canvas2D which can improve performance on non hardware
      * accelerated browsers.
      */
     allow: boolean;
@@ -560,7 +560,7 @@ export class Engine implements CanInitialize, CanUpdate, CanDraw {
     enableCanvasTransparency: true,
     useDrawSorting: true,
     configurePerformanceCanvas2DFallback: {
-      allow: true,
+      allow: false,
       showPlayerMessage: false,
       threshold: { fps: 20, numberOfFrames: 100 }
     },
@@ -835,7 +835,7 @@ O|===|* >________________>\n\
     this.canvas.parentNode.replaceChild(newCanvas, this.canvas);
     this.canvas = newCanvas;
 
-    const options = this._originalOptions;
+    const options = { ...this._originalOptions, antialiasing: this.getAntialiasing() };
     const displayMode = this._originalDisplayMode;
 
     // New graphics context

src/engine/Graphics/Context/ExcaliburGraphicsContext2DCanvas.ts

@@ -264,13 +264,15 @@ export class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphicsContex
    */
   save(): void {
     this.__ctx.save();
+    this._state.save();
   }
 
   /**
    * Restore the state of the canvas from the stack
    */
   restore(): void {
     this.__ctx.restore();
+    this._state.restore();
   }
 
   /**

src/spec/EngineSpec.ts

@@ -128,7 +128,10 @@ describe('The engine', () => {
 
   it('can switch to the canvas fallback on poor performance', async () => {
     engine = TestUtils.engine({
-      suppressPlayButton: false
+      suppressPlayButton: false,
+      configurePerformanceCanvas2DFallback: {
+        allow: true
+      }
     });
     await TestUtils.runToReady(engine);
     spyOn(engine, 'useCanvas2DFallback');