0

I'm trying to overlay unicode characters on an image, but the characters are not showing.

   var img = new Image()
   img.src = fs.readFileSync(path.join(__dirname, 'images', 'snow.jpg'))
   ctx.drawImage(img, 0, 0, 500, 500)

   img = new Image()
   //img.src = canvas.toBuffer()
   ctx.font = "40pt Calibri";
   ctx.lineWidth = 1
   ctx.strokeStyle = '#ddd'

   ctx.fillStyle = '#000'
   ctx.fillText('Wahoo', 49, 99)
   ctx.rotate(0.5)
   ctx.translate(20, -40)
   ctx.fillText("Testing", 100, 180)
   ctx.rotate(0)
   ctx.translate(20, -60)
   // Unicode here
   ctx.fillText('\u5929\u6c23', 160, 100)

   canvas.createPNGStream().pipe(res);`
user796870
  • 81
  • 2
  • 8
  • I would imagine you'd need a font that contains glyphs for the characters U+5929 `天` and U+6C23 `氣`, which Calibri does not. – bobince Sep 01 '16 at 21:20
  • It works when use canvas as an element and render in html. However it is not working when generate the image programmatically using canvas.createPNGStream(). – user796870 Sep 02 '16 at 12:12

1 Answers1

0

Maybe replace
ctx.strokeText = "#ddd"
by
ctx.fillText = "#ddd"

It may work better and correcly display...

Mammouth
  • 1