Firefox - CanvasRenderingContext2D.fillText: Canvas is already in error state.

In a new game I'm working on, I use an msImage object to render a list of words of screen and display a part of it in a scrolling list.

this.wordsBuffer=new msImage((screen.width-48) * this.mult,(20* 512) * this.mult);

The game runs fine in Chromium-based browsers, but on Firefox, the js console is filled with hundreds js errors coming from microengine.js: CanvasRenderingContext2D.fillText: Canvas is already in error state

Is there any workaround for this?

Here is the game: https://microstudio.io/spyros1973/letterforyou22/3R66GBJK/

make the code public so it can be debugged.

I made public a minimal version showcasing the issue:

https://microstudio.io/i/spyros1973/testingff/

When ran on non-FireFox browsers, it displays the words "one two three" in the middle of the screen.

On FireFox, nothing is displayed and CanvasRenderingContext2D.fillText: Canvas is already in error state fill up the js console.

The error comes from this line in microstudio runner code:

return this.context.fillText(text, x - this.anchor_x * w / 2, y + this.anchor_y * h / 2);

Turns out the problem was the size of the canvas, which was (ahem) 40960 pixels.

file wordlist class WordList

    this.wordsBuffer=new msImage((screen.width-48) * this.mult,(20* 512) * this.mult);

The canvas size the program tries to allocate is

    print("width = "+ this.wordsBuffer.width+", height = "+this.wordsBuffer.height)

width = 1051, height = 40960

( 128 MB )

It is possible that MicroStudio has some limit set on the size of the canvas that can be created, or this limit is set in the browser. The graphics card also has limits - in my case Firefox or take up 8 GB and does not slow down even though I close and open tabs that theoretically take up the most memory (I only have a few tabs open).

Allocate less memory for graphics. Why does it have to be 10 times larger than the largest screens today?

Thanks for taking a look - I had already posted above that this was the problem. It was an oversight - it doesn't need to be that large.

It's quite strange though that the allocation is done on the wordlist constructor, but if nothing is drawn in that msImage, no error comes up.

https://jhildenbiddle.github.io/canvas-size/#/?id=test-results --- Here are some canvas size tests from different browsers and systems.

Currently Chrome has max 64k x 64k pixels and Firefox 32k x 32k pixels .

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas --- The document says size is 10'000 x 10'000.