HTML5 Canvas Publish Dynamic Text Position Changes

Question

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?

patriartist16 · Accepted Answer

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); }

};

}

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded