KineticJS SetUp

Basic setup for KineticJS demo.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.js"></script>
Length: <input type="text" id="length" value="300"><br>
  Width: <input type="text" id="width" value="300"><br>
  <input type="submit" value="Draw" id="submit">


<table>
  <tr>
    <td>
      <div id="stage-container" />
    </td>
  </tr>
  <tr>
    <td align="center">
      <button id="reset">Reset</button>
    </td>
  </tr>
    <tr>
    <td align="center">
      <button id="getjson">Stage JSON to Console</button>
    </td>
  </tr>
  <!--<tr>
    <td align="center">
      <button id="loadjson" onclick="loadStage();">Load Stage from JSON</button>
    </td>
  </tr>-->
</table>

JavaScript

document.getElementById('submit').addEventListener('click', function() {
			draw();
		  }, false);
      


function draw()
{
	var widthcm = parseInt(document.getElementById("width").value);
	var lengthcm =  parseInt(document.getElementById("length").value);

	var stage = new Kinetic.Stage({
	  container: 'stage-container',
	  width: widthcm + 100,
	  height: lengthcm + 100
	});


	var layer = new Kinetic.Layer();

	var floorPlan = new Kinetic.Rect({
		  x: 50,
		y: 50,
		width:widthcm,
		height:lengthcm,
		stroke: 'black',
		strokeWidth: 1   
	});

	var doorRect = new Kinetic.Rect({
		  x: 5,
		y: 5,
		width:30,
		height:30,
		draggable: true,
		id: 'door',
		fill: 'black',  
	});

	var widthText = new Kinetic.Text({
	  x: (stage.getWidth() / 2) -25,
	  y: 25,
	  text: 'Width',
	  fontSize: 15,
	  fontFamily: 'Calibri',
	  fill: 'green'
	});

	var lengthText = new Kinetic.Text({
	  x: (stage.getWidth()-40) ,
	  y: (stage.getHeight()/2) -10,
	  text: 'Length',
	  fontSize: 15,
	  fontFamily: 'Calibri',
	  fill: 'green'
	});


	layer.add(floorPlan);
	layer.add(doorRect);
	layer.add(lengthText);
	layer.add(widthText);
	stage.add(layer);                            
	layer.draw();

	document.getElementById('reset').addEventListener('click', function() {
			reset(doorRect, layer);
		  }, false);
      
       document.getElementById('getjson').addEventListener('click', function() {
			getStageJSON(stage);
		  }, false);
	 
		  
	//document.getElementById('loadjson').addEventListener('click', function() {
	//		loadStage();
	//	  }, false);
  
}
      
function reset(doorRect, layer) {
	doorRect.setX(5);
	doorRect.setY(5);
    layer.draw();
}

function getStageJSON(stage) {
	try
	{
		var json = stage.toJSON();
		console.log(json);
	}
	catch(err) {}
}

function loadStage() {
	var json =...