JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.7.3-beta.js"></script>

<div id="container"></div>

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

function loadtickmark(whatlayer){
for(int i=0;i<10;i++){
    var rects = new Kinetic.Rect({
        x: 70,
        y: 75,
        width: 3,
        height: 10,
        fill: 'grey'
    });
    layer.add(rects);
}
}

var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 110
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 50,
        y: 50,
        width: 350,
        height: 60,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 1
      });

        layer.add(rect);



      
      
      stage.add(layer);