Images are Distorted in when I convert .FLA files to Canvas HTML5 Documents and post on my website

[CharlesCaptain]

So, I've been trying to convert all my website's .swf's to HTML5 Canvas, starting with my menu bar.  This file runs as expected when I test it in Animate, but when I upload this through CPanel and visit the address, I get this:

The fonts are running off the sides of the buttons.  

I've designed these buttons with mouseover frames so that you should be able to see my animated characters when you hover over the buttons, but now I'm just seeing bits of symbols, even when the cursor is nowhere near them.  When I do hover, the pictures are showing all distorted, like someone's moved a bunch of anchor points at random:

Is there some kind of pitfall in exporting Flash content to HTML5 Canvas documents that I don't know about?  Do I need to update my export settings?  Please help; I'd like to have this working before Flash goes down next week.

[kglad]

use web fonts only.

[CharlesCaptain]

Do you mean web safe fonts?  I'm using Blambot FX Pro Light BB, which is a web font.

[kglad]

no, web fonts != web safe fonts.

because you're using an adobe font it's possible you're using a web font:

if that's the case, position your textfields based on testing in a browser, not based on appearance in the animate ide.

[CharlesCaptain]

Okay, that should solve the text issue.  Thank you.
I still have the garbled images to deal with.  I think there's something I'm not getting about the image/bitmap/texture export.  

I am getting this error in the output window:

"Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system."

Does this have something to do with it?  Do I need to eliminate bitmaps?

[kglad]

probably not.  you can open your browser's developer console to check if there's a loading error (but if there were, you wouldn't see anything).

[CharlesCaptain]

These are my publish settings.

I tried exporting images as a spritesheet instead, but then it failed to load anything at all.

[CharlesCaptain]

I've determined that there definitely is a problem with my image settings.  The character that appears on one of my buttons uses a saved image.  When that character loads, I get this error message in the developer window:

"Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images."

[kglad]

that error is triggered when you're trying to do something more than just display the pixel data.

in most cases you can get-around that error by uploading the files to a file server and testing the files on the server.

[CharlesCaptain]

I have confirmed that it is something to do with plaid pattern on my character's shirt.  I removed said character from the Gallery button, and the menu loads as expected:

I'll have to figure out a workaround for implementing patterns like this, but this gives me something to work with.  Thanks, everyone.

[kglad]

you're welcome.