Skip canvas being used during Control.serialize()?

jamessimo · April 3, 2024, 8:41am

So this is a strange one and I understand that this is not really a common use case.

For my Figma to BabylonJS Figma plug-in. I have decided to rewrite it to use actual BabylonJS controls from NPM rather than just using my own custom-made psedo-controls. This is worked very well for things like containers, lines, rectangle etc… however when I am on font I have noticed that my plug-in is crashing, showing the error message if I try to give it a new font size, style or weight.

Invalid engine. Unable to create a canvas.

Again, other controls will Serialize fine, however, when I try to serialise a text block that I have tried to change its font size or its weight or its style. I get that error.

The error message suggests that Babylon.js is trying to create a canvas to measure the text metrics (fontWeight/Stlye/Size, in this case). I think this is likely happening during the serialization process, as i assume Babylon.js needs to calculate these metrics to accurately serialize the TextBlock control?

My question is, is there a way that I could simply skip this?
I think it’s quite strange behaviour since this isn’t required for other elements. I understand that a lot of the text stuff reflects real world CSS. Just wanted to ask if it’s possible that I skip the creating a fake canvas.

Deltakosh · April 3, 2024, 1:54pm

The real question is: why does it fail to create it?

jamessimo · April 3, 2024, 3:02pm

Figma plugins don’t have a canvas to access.

Deltakosh · April 3, 2024, 4:19pm

ooh I see! Please create an issue for me on the repo: I will add an option for you

jamessimo · April 6, 2024, 9:01am

github.com/BabylonJS/Babylon.js

Ability to "skip" using Canvas when serializing Textblocks and other CSS dependent GUI Controls.

opened 04:01AM - 06 Apr 24 UTC

jamessimo

**Is your feature request related to a problem? Please describe.** This feature… is due to an unneeded dependency on having a canvas for people who want to serialize GUI controls for BabylonJS outside of the engine. Right now, you can create BabylonJS GUI in memory and serialize it, however serialize anything that you need it edit beforehand for example font weight, font style, font size then you'll get this error; ``` Invalid engine. Unable to create a canvas. ``` This error message is because the canvas is used to measure the text metrics (fontWeight/Style/Size, in this case). I think this is likely happening during the serialization process, as i assume Babylon.js needs to calculate these metrics to accurately serialize GUI controls that have some form of CSS styling like gradients and fonts. **Describe the solution you'd like** in https://doc.babylonjs.com/typedoc/classes/BABYLON.GUI.Control#serialize I would like to be able to have a 3rd optional param of ```ts serialize(serializationObject: any, force?: boolean, useCanvas?: boolean): void ``` This should be True by default to not impact current use cases. It could also be “skipCanvas”, I’ll let the core team decide the best nomenclature. If you set this new useCanvas to false, then it will still serialize controls however skip the validation process and just accept whatever the user set the font sizes or gradients to, this is an advanced feature and would be recommended to be used by people who cannot use a canvas (3rd party tools, CLI pipelines etc..). I don’t know if this is appropriate to put in this issue, but I’ve also noticed that you cannot edit gradients x1,y1 positions as they are read only. However if you’re skipping the canvas validation these options may need to be exposed to the user. **Discussion** https://forum.babylonjs.com/t/skip-canvas-being-used-during-control-serialize/49302/2 @deltakosh on the forum asked me to make this and they said they can add it for me. Thank you, please let me know if you need more information.

jamessimo · April 24, 2024, 2:31am

hi @Deltakosh

I got the latest version with this new change, but it only works for controls. I try to add the AllowCanvas to Containers it wont work as containers dont have it.

I add all the controls to a container then run the seralize once on a container. Not sure how to achive this with just controls as controls cant have children added to them. Is there some Typescipt namespace issue I am not seeing?

Deltakosh · April 24, 2024, 2:08pm

nope sorry this is my bad

Here is the missing part:
Add allowCanvas to GUI Containers by deltakosh · Pull Request #15028 · BabylonJS/Babylon.js (github.com)

jamessimo · April 25, 2024, 11:41am

Hello @Deltakosh , sorry i feel like the most annoying person right now…

The allowCanvas = false works in that I don’t get an error on canvas-less environments. However, anything to do with font size, fontweight, and fontfamily is completely omitted from the serialization output. I need a playground here (you need to use the console to see the output) https://playground.babylonjs.com/#XJC2MY#1

The expected output is that whenever I set the font, size too, should still be in the serialzed output, even if it skips the canvas.

Deltakosh · April 25, 2024, 2:43pm

ok now with a PG it is clearer
Final fix for allowCanvas by deltakosh · Pull Request #15033 · BabylonJS/Babylon.js (github.com)

jamessimo · August 18, 2024, 1:52pm

@Deltakosh I think I found a new bug, this doesn’t seem to work for “Buttons” and I have a feeling its because buttons have a text comp to them.

If I try to serialise buttons even with “Allow Canvas” set to false I get the old “Invalid engine. Unable to create a canvas.” error.

Deltakosh · August 19, 2024, 3:33pm

wanna create a quick repro for me? Or even do a PR? I’m off for 2 weeks

jamessimo · April 30, 2025, 6:36am

Hi @Deltakosh !

Sorry been a long time since I updated this. I found the issue but can’t recreate it on the playground because it always has a canvas even if give allowCanvas=false during serialization. Same goes for my dev env.

I don’t mind making a PR but I can’t get this error to fire with normal testing because there is always a canvas.
This error occurs when I run my Figma to Babylonjs plugin.

This is happening in the _prepareFont() function here (during serialization)

github.com/BabylonJS/Babylon.js

packages/dev/gui/src/2D/controls/control.ts

13d0e6df2


      
          

              this._font =

                  this._getStyleProperty("fontStyle", "") +

                  " " +

                  this._getStyleProperty("fontWeight", "") +

                  " " +

                  this.fontSizeInPixels +

                  "px " +

                  this._getStyleProperty("fontFamily", "Arial");

          

              this._fontOffset = Control._GetFontOffset(this._font, this._host?.getScene()?.getEngine());

          

              //children need to be refreshed

              const descendants = this.getDescendants();

              for (const child of descendants) {

                  child._markAllAsDirty();

              }

          }

          

          /**

           * A control has a dimension fully defined if that dimension doesn't depend on the parent's dimension.

But it should be skipped with allowCanvas=false

github.com/BabylonJS/Babylon.js

packages/dev/gui/src/2D/controls/control.ts

13d0e6df2


      
              idealHeight = this.host.idealHeight;

              idealWidth = this.host.idealWidth;

              this.host.idealWidth = 0;

              this.host.idealHeight = 0;

          }

          SerializationHelper.Serialize(this, serializationObject);

          serializationObject.name = this.name;

          serializationObject.className = this.getClassName();

          

          // Call prepareFont to guarantee the font is properly set before serializing

          if (allowCanvas) {

              this._prepareFont();

          }

          if (this._fontFamily) {

              serializationObject.fontFamily = this._fontFamily;

          }

          if (this.fontSize) {

              serializationObject.fontSize = this.fontSize;

          }

          if (this.fontWeight) {

              serializationObject.fontWeight = this.fontWeight;

I think it maybe due to Button ioverriding the serialize function but not passing/acknowledge the allowCanvas param.

github.com/BabylonJS/Babylon.js

packages/dev/gui/src/2D/controls/button.ts

13d0e6df2


      
              }

          

              super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi);

          }

          

          /**

           * Serializes the current button

           * @param serializationObject defines the JSON serialized object

           * @param force force serialization even if isSerializable === false

           */

          public override serialize(serializationObject: any, force: boolean) {

              super.serialize(serializationObject, force);

              if (!this.isSerializable && !force) {

                  return;

              }

          

              if (this._textBlock) {

                  serializationObject.textBlockName = this._textBlock.name;

              }

              if (this._image) {

                  serializationObject.imageName = this._image.name;

This isn’t an issue on normal TextBlocks, only happens on Buttons but I assume could happen in Grids too since they also have an override during serialization.

Do you think I’m on the right track?

Deltakosh · April 30, 2025, 3:30pm

hey! It sounds reasonable to me… Wanna try a PR so we can check the impact?

jamessimo · May 2, 2025, 3:27pm

github.com/BabylonJS/Babylon.js

Pass "allowCanvas" into override serialize functions.

master ← jamessimo:master

opened 03:26PM - 02 May 25 UTC

jamessimo

+8 -6

Fixes a bug with instances of BabylonJS running in a "Canvas-less" environment c…rashing when trying to serialize buttons. Right now, when using the serialize() function in buttons, they ignore the "allowCanvas" parameter which was added in #15033 Link to BabylonJS Forum discussion: https://forum.babylonjs.com/t/skip-canvas-being-used-during-control-serialize/49302/13?u=jamessimo

jamessimo · May 8, 2025, 3:09am

it worked! No more error messages!

Topic		Replies	Views
Figma to BabylonJS plugin! (Source code now available) Demos and projects gui , ui , json , figma , design	62	4431	January 5, 2026
Figma To BabylonJS Runtime Issues Questions	25	858	August 19, 2023
Creating a GUI Button results in missing engine error Bugs gui	6	911	March 15, 2022
GUI Editor, JSON output (is barely useable) Bugs gui-editor	20	508	May 18, 2024
Possible typo in https://doc.babylonjs.com/how_to/gui3d Bugs	4	643	August 23, 2019

Skip canvas being used during Control.serialize()?

Related topics