JSFiddle - React, Tailwind, and code Playground

by clauswilke

HTML

<canvas id="myCanvas"></canvas>

CSS

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/caveat/v17/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9eIWpYT5Kmgq3sw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

JavaScript

// Get the canvas element
  var canvas = document.getElementById("myCanvas");

  // Get the 2D drawing context
  var ctx = canvas.getContext("2d");

  // Specify the font styles
  var font1 = "30px 'Merriweather', sans-serif";
  var font2 = "20px 'Caveat', cursive";

  // Wait for both fonts to load
  Promise.all([
    document.fonts.load(font1),
    document.fonts.load(font2)
  ]).then(function () {
    // Set the font styles
    ctx.font = `${font1}`;
    ctx.fillStyle = "black";
    ctx.textAlign = "center";

    // Set the position to draw the first text
    var x1 = canvas.width / 2;
    var y1 = canvas.height / 3;

    // Draw the first text on the canvas
    ctx.fillText("Hello, Roboto!", x1, y1);

    // Set the font styles for the second text
    ctx.font = font2;
    ctx.fillStyle = "blue";

    // Set the position to draw the second text
    var x2 = canvas.width / 2;
    var y2 = (canvas.height / 3) * 2;

    // Draw the second text on the canvas
    ctx.fillText("Hello, Caveat!", x2, y2);
  });