JSFiddle - React, Tailwind, and code Playground

by ysis81

HTML

<div id="containerCanvas">
  <canvas width="756" height="756" id="textbox"></canvas>
</div>

CSS

#textbox {
position: absolute;
  padding: 60px;
  box-sizing: border-box;
  background-color: #333333;
  border: 2px solid #428bca;
  z-index: 100;
  width: 400px;
  height: 400px;
  }

#containerCanvas {
  position: relative;
  top: 0;
  left: 0;
  margin: 20px;
}

JavaScript

var textCanvas = document.getElementById('textbox');
var contextTextBox = textCanvas.getContext('2d');

contextTextBox.fillStyle = "green";
contextTextBox.fillRect(0, 0, 756, 756);
var img = new Image;
img.src = "http://beulu.com/test_last/formulaWhite.svg";
img.onload = function(){
contextTextBox.drawImage(img, 0, 0, 378, 150);
contextTextBox.drawImage(img, 378, 0, 378, 150);
contextTextBox.drawImage(img, 0, 150, 378, 150);
contextTextBox.drawImage(img, 378, 150, 378, 150);
}