Search code examples
texthtml5-canvascreatejseaseljs

EaselJS StageGL: text not working (but does using Stage canvas)

I re-programmed a HTML5 game (using createJS) to match StageGL, but it turned out all text fields disappear. Switching back to Stage solved this specific problem (see code example below). Does anyone know a workaround to this?

Example code:

  canvas.width = stageWidth;
  canvas.height = stageHeight;

  stage = new createjs.StageGL(canvas); // <= text does not work with GL???
  stage = new createjs.Stage(canvas); // <= text works fine

  var textTest = new createjs.Text("Hello World");
  textTest.x = 10;
  textTest.y = 20;

  stage.addChild(textTest);

Thanks in advance for your comments!

Solution

  • Text will not work without being cached, as the Text/Vector canvas APIs are not supported by StageGL.

    Caching is pretty easy:

    var bounds = text.getBounds();
text.cache(bounds.x, bounds.y, bounds.width, bounds.height);

    When the text changes, you will need to recache the text.

    Cheers,