JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<br/>
<canvas id=c width=200 height=200></canvas>
<div>sdfsdfsdfKkkksdfsdf</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Fascinate+Inline);
@import url(http://fonts.googleapis.com/css?family=Fondamento);

@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('http://fonts.googleapis.com/css?family=Fascinate+Inline');
}

canvas {
    border: 1px solid Red;
}

div {
    font-family: 'Fondamento', cursive;
}

JavaScript

// font-face -> canvas -> image
var ctx = document.getElementById('c').getContext('2d');
ctx.font         = '200px "Arial"';
//ctx.fillStyle = 'orangered';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText  ('W', 100, 100);
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var data = imageData.data;
for(var i = 0; i < data.length; i+=4){
    data[i] = Math.abs(data[i] - 128);
    data[i + 1] = Math.abs(data[i + 1] - 128);
    data[i + 2] = Math.abs(data[i + 2] - 128);
    //data[i + 3] = 0;
}
ctx.putImageData(imageData, 0, 0);
location.href = ctx.canvas.toDataURL();