JSFiddle - React, Tailwind, and code Playground

by Nopphanan Mayoe

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.js"></script>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:800px;
    height:400px;
}

JavaScript

var stage = new Kinetic.Stage({
	    container: 'container',
		width : $('#container').width(),
		height : $('#container').height()
	});
	var layer = new Kinetic.Layer();
	stage.add(layer);

	var ruler = new Kinetic.Group({
	    x: 0,
	    y: 0,
	    width : $('#container').width(),
	    height: 35
	});
	layer.add(ruler);

	var rulerBG = new Kinetic.Rect({
	    width : $('#container').width(),
	    height: 35,
	    fillLinearGradientStartPoint: [107, 0],
	    fillLinearGradientEndPoint: [107, 35],
	    fillLinearGradientColorStops: [0, 'white', .75, "#ecf7fc", 1, "#cceaf6"],
	    stroke: "#cceaf6",
	    strokeWidth: .5
	});
	ruler.add(rulerBG);

	var layerLine = new Kinetic.Layer();
	var horizontalLine = new Kinetic.Line({
		points: [30, 15, 30, 35],
		stroke: "red",
		width : $('#container').width(),
		height : $('#container').height()
	});
	var verticalLine = new Kinetic.Line({
		points: [15, 30, 35, 30],
		stroke: "red",
		width : $('#container').width(),
		height : $('#container').height()
	});
	//layerLine.setZIndex(layer.getZIndex() + 1);
	layerLine.add(horizontalLine);
	layerLine.add(verticalLine);
	stage.add(layerLine);

	var rulerMarks = new Kinetic.Shape({
	    x: 15,
	    y: 15,
	    drawFunc: function (context) {
	        context.beginPath();
	        var count = 0;
	        for (var i = 0; i < ruler.getWidth(); i += 10) {
	        	var y = (i / 100 == parseInt(i / 100)) ? 0 : 10;
	            context.moveTo(i + 15 , y);
	            context.lineTo(i + 15 , 15); // line 15 = height
	            context.fillText(count, 12 + i * 10, -5);
	            
	            var x = (i / 100 == parseInt(i / 100)) ? 0 : 10;
	            context.moveTo(x, i + 15);
	            context.lineTo(15, i + 15);
	            context.fillText(count,-8, 15 + i * 10);
	            
	            count = count + 1;
	        }
	        context.fillStrokeShape(this);
	    },
	    stroke: 'black',
	    strokeWidth:...