I am trying to generate a styled(backgroundColor,borderColor,borderRadius, etc...) .png image using only JS, bypassing the DOM.

Is there any efficient way to do this? I have found ways to generate a .png file but I cannot apply any CSS style to it, I manage only to generate a square with a color, but that's it.

Does someone know a library to achieve this?

Example:

I used:

const fs = require('fs');
const PNGlib = require('node-pnglib');

let png = new PNGlib(150, 150);
for (let i = 20; i < 100; i++) {
  for (let j = 20; j < 100; j++) {
    png.setPixel(i + 10, j + 25, '#cc0044');
    png.setPixel(i + 20, j + 10, '#0044cc');
    png.setPixel(i + 30, j, '#00cc44');
  }
}

fs.writeFileSync('./block.png', png.getBuffer());

To generate 3 colored squares and export them in a single .png file.

The problem is that using this method I don't have any access to any CSS property I would like to use.