JSFiddle - React, Tailwind, and code Playground

by suri_295

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
    <script>
      window.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });

        var layer = new Kinetic.Layer();

        var text = new Kinetic.Text({
          text: 'Shadow Text!',
          fontFamily: 'Calibri',
          fontSize: 70,
          x: 20,
          y: 20,
          textStroke: 'red',
          textStrokeWidth: 2,
          shadow: {
            color: 'black',
            blur: 2,
            offset: [10, 10],
            opacity: 0.5
          }
        });

        var line = new Kinetic.Line({
          stroke: 'green',
          strokeWidth: 10,
          lineJoin: 'miter',
          lineCap: 'round',
          points: [50, 140, 350, 140],
          shadow: {
            color: 'black',
            blur: 10,
            offset: [5, 5],
            opacity: 0.5
          }
        });

        var rect = new Kinetic.Rect({
          x: 450,
          y: 120,
          width: 100,
          height: 50,
          fill: '#00D2FF',
          stroke: 'black',
          strokeWidth: 4,
          shadow: {
            color: 'black',
            blur: 10,
            offset: [10, 10],
            opacity: 0.5
          }
        });

        layer.add(text);
        layer.add(line);
        layer.add(rect);
        stage.add(layer);
      };

    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>