JSFiddle - React, Tailwind, and code Playground

by Chris Buttery

HTML

<canvas width="300" height="100" id='canvas'>Your browser does not support the HTML5 canvas tag.</canvas>
<img id='image'>
<a class="button" id="download" download="test.png">Download as image</a>
<br>
<input type="text" value="type something..." class='js-text' />

<select class="js-fontSize">
  <option>Select font size...</option>
  <option value="18px">18px</option>
  <option value="21px">21px</option>
  <option value="24px">24px</option>
</select>

<select class="js-fontType">
  <option>Select font size...</option>
  <option value="Arial">Arial</option>
  <option value="Georgia">Georgia</option>
  <option value="Verdana">Verdana</option>
</select>

CSS

canvas {
  display: none;
}

button {
  margin-bottom: 40px;
}

JavaScript

var canvas = document.getElementById('canvas');
var imageElem = document.getElementById('image');

var c = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = 100;
  
var text = "type something..."
var defaultFontType = 'Helvetica';
var defaultFontSize = '14px';

var fontType = defaultFontType;
var fontSize = defaultFontSize;

render (text, fontType, fontSize);

function render (value, type, size) {
	// background pattern
  c.fillStyle = "rgba(0, 0, 0, 1.0)";
  c.fillRect(0, 0, width, height);
  c.lineWidth = 1;
  for (var i=0; i<width; i++) {
    var cr = Math.floor(Math.random()*25 + 0).toString(16);
    var cg = Math.floor(Math.random()*25 + 127).toString(16);
    var cb = Math.floor(Math.random()*25 + 230).toString(16);
    c.beginPath();
    c.strokeStyle = '#'+cr+cg+cb;
    c.moveTo(i, 0);
    c.lineTo(i, height);
    c.stroke();
  }

	// text
  c.fillStyle = '#000';
  c.fillText(value, 10, 30);
  c.font = size + " " + type;
  imageElem.src = c.canvas.toDataURL();
  
  updateDownloadButton();
}


document.body.addEventListener('change', function(e) {
	if (e.target.classList.contains('js-fontType')) {
  	fontType = e.target.options[e.target.selectedIndex].value
    render (text, fontType, fontSize);
  }
  
  if (e.target.classList.contains('js-fontSize')) {
  	fontSize = e.target.options[e.target.selectedIndex].value
    render (text, fontType, fontSize);
  }
  
  return;
});

document.body.addEventListener('keyup', function (e) {
	if (e.target.classList.contains('js-text')) {
		text = e.target.value;
    render (text, fontType, fontSize);
  }
  return;
});


function updateDownloadButton() {
  var target = document.querySelector('.button');
  target.href = canvas.toDataURL();
}

downloadCanvas(target)