Fixed canvas renderer

demo/basic.js

@@ -1,6 +1,12 @@
 /* global PIXI */
+const useCanvas = false;
 
-const app = new PIXI.Application({ width: 800, height: 600 });
+if (useCanvas) {
+    PIXI.tilemap.CanvasTileRenderer.registerExtension();
+}
+
+const canvRenderer = new PIXI.CanvasRenderer();
+const app = new PIXI.Application({ width: 800, height: 600, forceCanvas: useCanvas, hello: true });
 const tilemap = new PIXI.tilemap.CompositeTilemap();
 
 document.body.appendChild(app.view);

src/CanvasTileRenderer.ts

@@ -9,7 +9,7 @@ import { extensions, ExtensionType, IRenderer } from '@pixi/core';
  *
  * // You must register this yourself (optional). @pixi/tilemap doesn't do it to
  * // prevent a hard dependency on @pixi/canvas-core.
- * CanvasRenderer.registerPlugin('tilemap', CanvasTileRenderer);
+ * CanvasTileRenderer.registerExtension();
  * ```
  */
 // TODO: Move to @pixi/tilemap-canvas
@@ -29,14 +29,18 @@ export class CanvasTileRenderer {
         this.tileAnim = [0, 0];
     }
 
+    static registerExtension() {
+        extensions.add({
+            name: 'tilemap',
+            type: ExtensionType.CanvasRendererPlugin,
+            ref: CanvasTileRenderer as any
+        });
+    }
+
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
     static getInstance(renderer: any): CanvasTileRenderer {
         if (!renderer.plugins.tilemap) {
-            extensions.add({
-                name: 'tilemap',
-                type: ExtensionType.CanvasRendererPlugin,
-                ref: CanvasTileRenderer as any
-            });
+            throw new Error('Extension not registered!');
         }
 
         return renderer.plugins.tilemap;

src/CompositeTilemap.ts

@@ -355,7 +355,7 @@ export class CompositeTilemap extends Container
         {
             const wt = this.worldTransform;
 
-            renderer.context.setTransform(
+            renderer.canvasContext.activeContext.setTransform(
                 wt.a,
                 wt.b,
                 wt.c,

src/Tilemap.ts

@@ -338,7 +338,7 @@ export class Tilemap extends Container
         {
             const wt = this.worldTransform;
 
-            renderer.context.setTransform(
+            renderer.canvasContext.activeContext.setTransform(
                 wt.a,
                 wt.b,
                 wt.c,
@@ -357,7 +357,7 @@ export class Tilemap extends Container
         const points = this.pointsBuf;
         const tileAnim = this.tileAnim || (renderer.plugins.tilemap && renderer.plugins.tilemap.tileAnim);
 
-        renderer.context.fillStyle = '#000000';
+        renderer.canvasContext.activeContext.fillStyle = '#000000';
         for (let i = 0, n = points.length; i < n; i += POINT_STRUCT_SIZE)
         {
             let x1 = points[i + POINT_STRUCT.U];
@@ -377,18 +377,18 @@ export class Tilemap extends Container
 
             if (textureIndex >= 0 && this.tileset[textureIndex])
             {
-                renderer.context.globalAlpha = alpha;
-                renderer.context.drawImage(
+                renderer.canvasContext.activeContext.globalAlpha = alpha;
+                renderer.canvasContext.activeContext.drawImage(
                     (this.tileset[textureIndex] as any).getDrawableSource(),
                     x1, y1, w, h, x2, y2, w, h
                 );
             }
             else
             {
-                renderer.context.globalAlpha = 0.5;
-                renderer.context.fillRect(x2, y2, w, h);
+                renderer.canvasContext.activeContext.globalAlpha = 0.5;
+                renderer.canvasContext.activeContext.fillRect(x2, y2, w, h);
             }
-            renderer.context.globalAlpha = 1;
+            renderer.canvasContext.activeContext.globalAlpha = 1;
         }
     }