JSFiddle - React, Tailwind, and code Playground

by and7ey

HTML

<body>
		<code>context.fillText(text,
		<input type="text" id="x" title="x" value="-100" />,
		0)</code>
		<input type="submit" id="redraw" value="redraw" /> <br />
		<canvas id="canvas" width="640" height="400" />
	</body>

CSS

html {
	background : white;
	color      : black;
}
input[type=text] {
	border : none;
	border-bottom : 1px dashed #999;
	font : 15px monospace;
	margin : 2px;
	width : 3em;
	text-align : right;
}
canvas {
	margin : 4px;
}

JavaScript

(function (undefined) {
	var $ = function (id) {
		return document.getElementById(id);
	};
	var drawCells = function (ctx, size) {
		size = size || 100;
		var canv = ctx.canvas;
		var w = ctx.canvas.width, h = ctx.canvas.height;
		var count = Math.ceil(Math.max(w, h) / size);
		ctx.save();
		ctx.beginPath();
		do {
			var line = count * size;
			ctx.moveTo(line, 0);
			ctx.lineTo(line, h);
			ctx.moveTo(0, line);
			ctx.lineTo(w, line);
		} while (count--);
		ctx.closePath();
		ctx.lineWidth = 0.3;
		ctx.strokeStyle = '#ccc';
		ctx.stroke();
		ctx.restore();
	};
	var fillText = function (ctx, text) {
        ctx.fillText(
            text,
			$('x').value || 0,
            0
		);
	};
	var draw = function () {
		var ctx = $('canvas').getContext('2d');
		ctx.restore();
        ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
		drawCells(ctx, 80);
		ctx.save();
        var gradient = ctx.createLinearGradient(0, 0, 30, 0);
        gradient.addColorStop(0.00, 'yellow');
        gradient.addColorStop(0.01, 'black');
        gradient.addColorStop(1.00, 'black');
        ctx.fillStyle = gradient;

        ctx.translate(ctx.canvas.width/2, 100);
        // draw line
        ctx.beginPath();
        ctx.moveTo(0,-70);
        ctx.lineTo(0,50);
        ctx.closePath();
        ctx.stroke();        

        // draw text
        ctx.font='36px verdana';
        var text='Lorem ipsum dolor sit amet';
        
        fillText(ctx,text);
	};
	$('redraw').onclick = draw;
    draw();
})();