Jump to content

(solved) Using tinted bitmapText causes memory leaks in Canvas


Recommended Posts

Steps to reproduce:
- Force Phaser to CANVAS
- Display a tinted bitmapText string
- Clear game cache, purge glyphs, and remove any reference to that bitmapText
- See in a debugger how 1 instance of HTMLCanvasElement and 1 of CanvasRenderingContext2D remains allocated in memory for each character the string was made of (a 100 characters string will produce 100 istances of each)


I'm using tinted text extensively in my game, so I'm trying to fix the issue in Phaser, but still can't track down and destroy those rogue canvases. Any hint on how to do a temporary fix would be much appreciated!


Here's a code snippet in Typescript:


module TestModule {

	export class Game extends Phaser.Game {

		constructor() {

			super(800, 600, Phaser.CANVAS, 'content', null);
			this.state.add('BitmapTextLevel', BitmapTextLevel, true);

	export class BitmapTextLevel extends Phaser.State {

		text : Phaser.BitmapText;
		firstUpdate : boolean = false;

		preload() {

			this.game.load.baseURL = 'http://examples.phaser.io/assets/';
			this.game.load.crossOrigin = 'anonymous';
			this.game.load.bitmapFont('desyrel', 'fonts/bitmapFonts/desyrel.png', 'fonts/bitmapFonts/desyrel.xml');

		update() {
			if (!this.firstUpdate) {

				this.text = this.game.add.bitmapText(0, 100, "desyrel", "***.***.***.***.*40*.***.***.***.***.***");
				this.text.tint = 1000000;

				this.time.events.loop(1000, this.changeTint, this);
				this.time.events.add(10000, this.clearCache, this);
				this.firstUpdate = true;

		changeTint() {
			if (this.text) {
				this.text.tint = this.game.rnd.integerInRange(100000, 1000000);

		clearCache() {
			this.text = null;


Link to comment
Share on other sites

Apparently it's just the Pixi CanvasPool that grows according to the number of characters that have to be rendered at once. If it becomes a problem (and it was for me with 1200  characters that were used in one state only) clearing the pool manually when necessary works just fine:

	while(PIXI.CanvasPool.pool.length > 0) {
		let elem = PIXI.CanvasPool.pool.pop();
		elem.parentNode = null;
		elem = null;


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...