JSFiddle - React, Tailwind, and code Playground

by danzkusuma

HTML

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

<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/4.3.1/kinetic.min.js"></script>

CSS

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

JavaScript

function loadtickmark(layer) {
    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
    });

loadtickmark(layer);

layer.add(rect);
stage.add(layer);