JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.3/konva.min.js"></script>
<div id="container"></div>

CSS

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #F0F0F0;
}

#container {}

JavaScript

var stage = new Konva.Stage({
      container: 'container',
      width: 340,
      height: 300
    });
    var txtcont = new Konva.Layer({draggable: true});
    // to align text in the middle of the screen, we can set the
    // shape offset to the center of the text shape after instantiating it
    simpleText.setOffset({
      x: simpleText.getWidth() / 2
    });
    // since this text is inside of a defined area, we can center it using
    // align: 'center'
    var complexText = new Konva.Text({
      x: 20,
      y: 60,
      text: 'COMPLEX TEXT\n\nAll the world\'s a stage, and all the men and women merely players. They have their exits and their entrances.',
      fontSize: 18,
      fontFamily: 'Calibri',
      fill: '#555',
      width: 300,
      padding: 20,
      align: 'center'
    });
    var rect = new Konva.Rect({
      x: 20,
      y: 60,
      stroke: '#555',
      strokeWidth: 1,
      fill: '#ddd',
      width: 300,
      height: complexText.getHeight(),
      shadowColor: 'black',
      shadowBlur: 10,
      shadowOffset: [10, 10],
      shadowOpacity: 0.2,
      
    });
    // add the shapes to the layer
    txtcont.add(rect);
    txtcont.add(complexText);
    // add the layer to the stage
    stage.add(txtcont);