Converts a Font Awesome font into a image using canvas.

convert.js

// Thanks to Jake Trent for the tip on how to do this
// https://jaketrent.com/post/react-dnd-text-drag-preview/

// Create the canvas
const c = document.createElement('canvas');
const ctx = c.getContext('2d');

const body = document.querySelector('body');
body.appendChild(c);

ctx.rect(0, 0, 100, 100);

ctx.save();
ctx.fillStyle = 'rgba(255, 255, 255, 0)';
ctx.strokeStyle = 'rgba(255, 255, 255, 0)';
ctx.fill();
ctx.stroke();
ctx.restore();

// set the font awesome font
ctx.font = '35px FontAwesome';
// set the text to the unicode value of the font. 
ctx.fillText('\uf0f6', 35, 60);

const img = new Image();

img.src = c.toDataURL();
console.log(img);
body.appendChild(img);