Caracteres Unicode não sendo renderizados corretamente na tela HTML5

Estou tentando renderizar uma clave de sol unicode usando o elemento de tela HTML5. Ao usar o código de caractere correto (especificamente 1D120), ele renderiza bem em HTML, mas quando tento usá-lo dentro de uma tela, um caractere estranho aparece

O código a seguir está no meu arquivo javascript, que funciona sua mágica na tela ...

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.font = "48px serif";
context.strokeText("\u1D120", 10, 50);
<h1>&#x1D120;</h1>

<canvas id="canvas" width="100" height="100">
</canvas>

Infelizmente, não posso colocar uma foto do personagem porque meu representante ainda está muito baixo.

Qualquer insight sobre o que pode estar causando esse problema é apreciado. Desde já, obrigado!

questionAnswers(2)

yourAnswerToTheQuestion