Canvas

For drawing hooks the ExcaliburGraphicsContext replaces the browser CanvasRenderingContext2D. However, if you need to do some custom drawing using the CanvasRenderingContext2D the new Canvas graphic has your back.

The canvas is a special type of graphic that acts like a shim between direct CanvasRenderingContext2D drawing and the ExcaliburGraphicsContext.

This type of graphic is re-rendered every time the graphic is drawn, thus it should be used sparingly due to this inefficiency. It is recommended you use the cache: true property and call flagDirty() when there is something new to draw.

const canvas = new Canvas({
  draw: (ctx: CanvasRenderingContext2D) => {
    ...
  }
});

Example

const canvas = new ex.Canvas({
    cache: true,  // If true draw once until flagged dirty again, otherwise draw to Canvas every frame
    draw: (ctx) => {
        console.log('With cache=true I draw once');
        ctx.fillStyle = 'red';
        ctx.fillRect(0, 0, 200, 200);
    }
})

const actor = new ex.Actor({
    pos: game.screen.center
});

actor.graphics.use(canvas);