JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<link rel="stylesheet" href="https://st.fontstorage.com/font/import/madewaffleslab.css">
<h3>
Test
</h3>
<canvas id="c" width="600px" height="400px"></canvas>

CSS

body {
  font-family: 'MADE Waffle Slab';
}
canvas {
  /*border: 1px solid #F00;*/
}

JavaScript

var canvas = new fabric.Canvas('c');
var elsRendered = [];
var els = [{
	t: 'rect',
  left: 0,
  top: 0,
  fill: 'orange',
  width: 200,
  height: 200
},
{
	t: 'text',
	text: 'CAVSND'[Math.floor(Math.random()*6)],
	left: 0,
  top: 0,
  fontSize: 160,
  width: 200,
  fontFamily: 'MADE Waffle Slab',
  fill: '#FFF',
  textAlign: 'center',
  fontWeight: 'bold',
  cba: function(el1) {
    if(el1) {
    el1.left = (200 - el1.width)/2;
		el1.top = (200 - el1.height)/2;
    }
  }
 },
{
	t: 'rect',
  left: 0,
  top: 200,
  fill: '#000',
  width: 100,
  height: 100
},
{
	t: 'text',
  text: '8',
  left: 75,
  top: 190,
  fontSize: 120,
  width: 200,
  fontFamily: 'MADE Waffle Slab',
  fill: 'lime',
  textAlign: 'center',
  fontWeight: 'bold',
  angle: 45
},
{
	t: 'rect',
  left: 0,
  top: 300,
  fill: 'red',
  width: 100,
  height: 100
},
{
	t: 'text',
  text: 'mb',
  left: 400,
  top: 300,
  fontSize: 50,
  width: 200,
  fontFamily: 'MADE Waffle Slab',
  fill: 'yellow',
  textAlign: 'center',
  fontWeight: 'bold',
  cba: function(el1) {
    if(el1) {
    el1.left = (100 - el1.width)/2;
		el1.top = 300 + (100 - el1.height)/2;
    }
  }
},
{
	t: 'rect',
  left: 100,
  top: 200,
  fill: 'cyan',
  width: 200,
  height: 200
},
{
	t: 'rect',
  left: 300,
  top: 0,
  fill: '#FFF',
  width: 300,
  height: 400,
  cba: function(el1) {
  	if(el1) {
    	// load bg
    	fabric.util.loadImage('http://www.wildtextures.com/wp-content/uploads/wildtextures-just-paper-seamless-texture-480x480.jpg', function (img) {
        el1.setPatternFill({
          source: img,
          repeat: 'repeat'
        });
        canvas.renderAll();
      });
    }
  }
},
{
	t: 'text',
  text: 'Fresh news',
  left: 300,
  top: 30,
  fontSize: 40,
  width: 200,
  fontFamily: 'MADE Waffle Slab',
  fill: '#000',
  statefullCache: true,
  textAlign: 'center',
  fontWeight: 'bold',
  cba: function(el1) {
    if(el1) {
    el1.left = 300 + (300 - el1.width)/2;
    
      // load pattern
     ...