Render complete in Phaser

Phaser 3
1

Good morning everyone

So my project is to render some graphics in canvas and then, after everything is drawn, save it as an image and put on the website, in a html img tag.

Is there any way I can detect whether my drawing is finished or not?

I’m throwing an event after drawing the chart. But by that time the image has not been rendered yet and canvas returns an empty image with canvas.getDataURL(). Is there any way except using timeouts or delays?

the code that doesn’t work

this.add(this._beaconPieChart);
const event = new Event("pieChartIsReady");
window.dispatchEvent(event);

the code that works

this.add(this._beaconPieChart);
const event = new Event("pieChartIsReady");
setTimeout(() => {
  window.dispatchEvent(event);
}, 16);
2

What are this.add(), this_beaconPieChart, and canvas?

3

The project structure goes like this

structure

In the Main View I have a build function

  _build() {
    this._beaconPieChart = new BeaconPieChart(this.scene, this._chartData);
    this.add(this._beaconPieChart);
    const event = new Event("pieChartIsReady");
    setTimeout(() => {
      window.dispatchEvent(event);
    }, 50);
  }

the canvas is in the index.js file (the starting file). I call a _extractImageFromCanvas function on the pieChartIsReady event

4

Use generateTexture().