JSFiddle - React, Tailwind, and code Playground

by wengshenshun

HTML

<link href="https://fonts.googleapis.com/css?family=Changa|Unlock" rel="stylesheet">
<canvas id="myCanvas" width="740" height="400" />

JavaScript

const prepareFontLoad = (fontList) => Promise.all(fontList.map(font => document.fonts.load(font )))
async function WriteCanvasText() {
    // write some text to the canvas
    const canvas = document.getElementById("myCanvas");
    const context = canvas.getContext("2d");
    const fontList = ['bold 42px Changa', 'bold 24px Unlock']
    await prepareFontLoad(fontList)
    context.font = fontList[0];
    context.fillStyle = "#d50";
    context.fillText("Canvas Title", 5, 100);
    context.font = fontList[1];
    context.fillText("Here is some text on the canvas...", 5, 180);
}
WriteCanvasText();