JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

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

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


var style1 = "20px Sans-Serif";
var style2 = "italic 20px Sans-Serif";

var accumWidth = 30;

accumWidth += drawText("This is an ", style1, accumWidth, 50);
accumWidth += drawText("italic ", style2, accumWidth, 50);
accumWidth += drawText("word", style1, accumWidth, 50);


function drawText(text, style, x, y) {

    if (ctx.font !== style) {
        ctx.font = style;
    }

    ctx.fillText(text, x, y);

    return (ctx.measureText(text).width);

}