何が言いたいのか

PCとスマホでCanvasの表示が変わる現象があった。

何を表示したいのか

Canvasいっぱいに

🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓
🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓🌓

といった感じに表示したい。

const emoji = "🌓";

PC

スマホ

const emoji = "🌗";

PC

スマホ

ソース

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  canvas {
    border: solid 1px black;
  }
  </style>
</head>
<body>
  <canvas></canvas>
  <script src="main.js"></script>
</body>
</html>

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

canvas.width = 1000;
canvas.height = 1000;

context.fillStyle = "#fff";
context.fillRect(0, 0, canvas.width, canvas.height);

const size = 1;
context.font = `400 ${size}px 'ＭＳ Ｐゴシック', '游ゴシック', YuGothic, 'メイリオ', Meiryo, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', Verdana, Roboto, 'Droid Sans', sans-serif`;
context.textBaseline = "top";
context.textAlign = "left";

const emoji = "🌓";
// const emoji = "🌗";
const text = emoji.repeat(Math.ceil(canvas.width / size));

for (let y = 0; y < canvas.height; y += size) {
    context.fillText(text, 0, y);
}

環境

PC：Windows11のChrome
スマホ：iPhoneX（iOS17.1.2）のChrome

終わりに

~~多分、負荷を減らすための処理が走っている。~~
この現象を回避する手段はないと思われる。

コメ欄でスマホが一色になる理由が書いてあります。