CodePen

HTML

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

CSS

            
              body{
  overflow:hidden;
}
#container{
	margin-right: auto;
	margin-left: auto;
	width: 500px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var canvasLen = 400;//size of the desk
var dimension = 20;
var stage = new Kinetic.Stage({
	container: 'container',
	width: canvasLen,
	height: canvasLen
});
layer = new Kinetic.Layer();

var desk = new Kinetic.Rect({
	x: 0,
    y: 0,
    width: canvasLen,
    height: canvasLen,
    stroke: 'black',
    strokeWidth: 4
});

// add the shape to the layer
layer.add(desk);

//creating Square group
var squareGroup = new Kinetic.Group({
	x: 0,
	y: 0
});
//adding squares onto layer
var stage_width = stage.getWidth();
function create_square(posr,posc,state,len){
	var square = new Kinetic.Rect({
		id : "sqr"+ posr + "," + posc,
		posr: posr,
		posc: posc,
		state : state,
		x: posr*len,
		y: posc*len,
		width: len,
		height: len,
		stroke: 'black',
		strokeWidth: 2,
		fill: 'white'
	});
	console.log(square.attrs.id);
	squareGroup.add(square);

	//highlight on mouseover
	square.on("mouseover", function(){
		square.setFill('blue');
		layer.draw();
	});
	square.on("mouseout", function(){
		square.setFill('white');
		layer.draw();
	});
}
function addsquare(dimension){
	for (var row = 0; row < dimension; row++) {
		for (var col = 0; col < dimension; col++){
			var len = stage_width/dimension;
			create_square(row,col,0,len);
		}
	}
}


addsquare(dimension);
layer.add(squareGroup);
stage.add(layer);
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................