Canvas2D - globalAlpha not working on fillText with colored emoji

Issue #12233667 • Assigned to Christian F.


Dexter L.
Jun 4, 2017
This issue is public.
Found in
  • Microsoft Edge
Standard affected
HTML Canvas 2D Context

Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Create Canvas 2D Context
  2. Set globalAlpha to be value between 0 and 1
  3. Set font supporting colored emoji like “Segeo UI Emoji”
  4. fillText with colored characters like “😂”
  5. The string in fillText is expected to have text opacity set in (2), but now in Edge, only the colored glyph would have either concrete color (if globalAlpha > 0) or transparent (if globalAlpha = 0)


ctx.globalAlpha = 0.5;

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 300, 100);

ctx.fillStyle = 'yellow';
ctx.font = "500 4em Segoe UI Emoji";
ctx.fillText("1😂23", 80, 170);

Attached results in Edge 40.15063.0.0 and Firefox 53.0.3

My Windows 10 App BGraphics, based on Edge HTML, is affected by this issue. User could have to create colored emoji with different opacity on a canvas.


Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Rick J.”

    Changed Assigned To to “Christian F.”

  • Hi Team, any updates from this issue? Thanks! :)

  • Hi Team, is there any updates? Thanks!

  • Hi, do you have any updates on the Canvas color emoji issue?

You need to sign in to your Microsoft account to add a comment.

Sign in