HTML5 Canvas Publish Dynamic Text Position Changes

[devt19489810]

We're exporting a project to HTML5 canvas. The vertical text positions within a text area are changing.

In Animate:

After the export when running the project in a browser (Chrome or Safari on Mac at this point), with a border added for clarity:

Note the changed top and bottom paddings within the text box, almost as if they have been flipped. The text box itself is still vertically centered within the canvas. However, the center mark in Animate is below the middle bar of the E, whereas in the browser it's near the top of the middle bar of the E.

Is this an export problem, or something we can control/fix within Animate or with the publish settings?

[chrisd28953920 · Accepted solution]

I had the same problem recently and found this fix. Depending on the font being used, you may need to adjust the lineHeight *0.14 value.

var firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

if (firefox && createjs)

{

    createjs.Text.prototype._drawTextLine = function(ctx, text, y)

    {

        // Adjust text position only if textBaseline is "top"

        if (this.textBaseline === "top")

        {

            var lineHeight = this.lineHeight || this.getMeasuredLineHeight();

            y += lineHeight * 0.14;

        }

        // Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:

        if (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }

        else { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }

    };

}

[OMA2k]

Hello chrisd28953920.

Thank you for your answer. I added your code to the beginning of the init() function of the HTML file and it worked for me perfectly!!