CODEWITHSUNDEEP
ioshtmlhtml5-canvasmobile-safari
Carlos Mermingas
Carlos Mermingas

Reputation: 3892

How to scale emojis in html5 canvas in Safari iOS?

This Plunkr renders text in an HTML5 Canvas. Here's the relevant code:

// HTML
<canvas #myCanvas width="600" height="200"></canvas>

// Code
canvas.width = canvas.width;
let ctx = canvas.getContext('2d');
ctx.font = '100px Verdana';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#000000';
ctx.fillText(this.userText, 10, 100);

Note: The Plunkr uses Angular 2, which is really unrelated to this issue.

The problem that I am having is that when the text includes emojis, the emojis don't scale up to match the font size in Safari iOS. It looks great in Chrome and Safari OS X, though. See screenshots below.

How do I get the emojis to match the font size?

Screenshot from Safari OS X:

Screenshot from Safari OSX

Screenshot from Safari iOS:

Screenshot from Safari iOS

Upvotes: 0

Views: 689

Answers (1)

Carlos Mermingas
Carlos Mermingas

Reputation: 3892

I guess this was an issue with iOS. It just works well on the new version: iOS 10.

Upvotes: 1

Related Questions