JSFiddle - React, Tailwind, and code Playground

by gothick

HTML

<canvas id="canvas" width="200" height="200"></canvas>

JavaScript

var c = document.getElementById('canvas');
var context = c.getContext('2d');
var backgroundImage = new Image();

backgroundImage.onload = function() {
    // Once the image has finished loading, draw the 
    // image and then the text.
    DrawScreen();
    DrawText();
  };
backgroundImage.src = "http://lorempixum.com/200/200/";

function DrawScreen() {
    context.drawImage(backgroundImage, 0, 0);
}

function DrawText() {
    context.fillStyle = "red";
    context.font = "18px sans-serif";
    context.textBaseline = 'top';
    context.fillText("This is a test", 50, 100);
}