0

I've build a NodeJs project using skia-canvas library and managed to get working a image canvas example with a text on it.

Here is the code. It loads an image and applies a filter, then applies a logo and the text.

const canvas = new Canvas(1920, 1080)
const context = canvas.getContext("2d")
const bk = await loadImage('image.png')
context.filter = 'grayscale(100%) brightness(80%) contrast(150%)'
drawImageProp(context, bk, 0, 0, 1920, 1080) //function to fit image
context.filter = 'none'
const logo = await loadImage('logo.png')
context.drawImage(logo, 0, 0)

const X_TEXT_POSITION = 107
    
context.font = 'bold 170px Open Sauce Sans'
context.fillStyle = "#ffffff"
context.text
context.fillText('Some Text', X_TEXT_POSITION, 375)

Now, I am using the exact same code on my Electron app, and the result is working partially. The image is applied, and the filter as well and even the logo appears in the result. What is not showing, though, is the 'Some Text', which works on the Node app

I am not receiving any errors in console and I have no other clue why this is not working.

Version:

"skia-canvas": "^0.9.25"
ionuttibi
  • 445
  • 2
  • 13
  • Blind shot, does your electron environment has the Open Sauce Sans font installed globally? – Kaiido Sep 19 '21 at 02:01
  • You might be hitting close, how do I install the font globally? Following your reply I've tried this https://stackoverflow.com/questions/60479802/custom-font-is-not-showing-on-electron-vue-app but no success – ionuttibi Sep 20 '21 at 06:34

0 Answers0