JSFiddle - React, Tailwind, and code Playground

by Nopphanan Mayoe

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.min.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 GRID_SIZE = 20,
	width = stage.getWidth(),
	height = stage.getHeight();
	// horizontal line
	for (var i = 0; i < width + 1; i++) {
		var I = i * GRID_SIZE;
		var l = new Kinetic.Line({
			strokeWidth : 1,
			stroke: "#ddd",
			points: [I, 0, I, height]
		});
		layer.add(l);
	}
	// vertical line
	for (var j = 0; j < height + 1; j++) {
		var J = j * GRID_SIZE;
		var l2 = new Kinetic.Line({
			strokeWidth : 1,
			stroke: "#ddd",
			points: [0, J, width, J]
		});
		layer.add(l2);
	}


	layer.draw();