Canvas2D - globalAlpha not working on fillText with colored emoji

Issue #12233667 • Assigned to Christian F.

Details

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

Found in build #
40.15063
Reports
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)

Code:

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.
Thanks.

Attachments

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Rick J.”

    Changed Assigned To to “Christian F.”

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

Sign in