JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<canvas></canvas>

JavaScript

var context = document
    .querySelector('canvas')
    .getContext('2d');
var pos = {x: 50, y: 50};
var txt = 'Hello!';
var txtHeight = 50; 

context.font = txtHeight + 'px Verdana';
var txtWidth = context.measureText(txt).width; 
var gradient = context.createLinearGradient(
    pos.x, pos.y, txtWidth, txtHeight);

gradient.addColorStop(0,"red");
gradient.addColorStop(1,"blue");
context.fillStyle = gradient;

context.fillText(txt,pos.x,pos.y);