$(init);
var cellWidth = 18.5, cellHeight = 15;
function init() {
drawGrid();
drawTriangle1();
drawTriangle2();
drawPoly1();
drawPoly2();
$('#canvas-triangle1,#canvas-triangle2,#canvas-poly1,#canvas-poly2').draggable();
}
function drawGrid() {
var cellCountX = 15, cellCountY = 15;
var c = document.getElementById('canvas-grid');
c.width = cellWidth * cellCountX + 1;
c.height = cellHeight * cellCountY + 1;
var ctx = c.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, c.width, c.height);
ctx.strokeStyle = 'rgb(127, 127, 127)';
for (var i = 0; i <= cellCountX; i++) {
ctx.moveTo(i * cellWidth, 0);
ctx.lineTo(i * cellWidth, c.height);
ctx.stroke();
}
for (var i = 0; i <= cellCountX; i++) {
ctx.moveTo(0, i * cellHeight);
ctx.lineTo(c.width, i * cellHeight);
ctx.stroke();
}
}
function drawTriangle1() {
var canv = document.createElement('canvas');
document.body.appendChild(canv);
canv.id = 'canvas-triangle1';
canv.width = cellWidth * 5;
canv.height = cellHeight * 2;
var ctx = canv.getContext('2d');
ctx.strokeStyle = 'black';
ctx.fillStyle = 'rgba(4, 145, 110, .5)';
ctx.beginPath();
ctx.moveTo(0, canv.height);
ctx.lineTo(canv.width, canv.height);
ctx.lineTo(canv.width, 0);
ctx.fill();
ctx.closePath();
ctx.stroke();
}
function drawTriangle2() {
var canv = document.createElement('canvas');
document.body.appendChild(canv);
canv.id = 'canvas-triangle2';
canv.width = cellWidth * 8;
canv.height = cellHeight * 3;
var ctx = canv.getContext('2d');
ctx.strokeStyle = 'black';
ctx.fillStyle = 'rgba(194, 5, 3, .5)';
ctx.beginPath();
ctx.moveTo(0, canv.height);
ctx.lineTo(canv.width, canv.height);
ctx.lineTo(canv.width, 0);
ctx.fill();
ctx.closePath();
ctx.stroke();
}
function drawPoly1() {
var canv = document.createElement('canvas');
canv.id = 'canvas-poly1';
document.body.appendChild(canv);
canv.width = cellWidth * 5;
canv.height = cellHeight * 2;
var ctx = canv.getContext('2d');
ctx.strokeStyle = 'black';
ctx.fillStyle = 'rgba(224, 152, 49, .5)';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canv.width, 0);
ctx.lineTo(canv.width, cellHeight * 1);
ctx.lineTo(cellWidth * 2, cellHeight * 1);
ctx.lineTo(cellWidth * 2, cellHeight * 2);
ctx.lineTo(0, cellHeight * 2);
ctx.fill();
ctx.closePath();
ctx.stroke();
}
function drawPoly2() {
var canv = document.createElement('canvas');
canv.id = 'canvas-poly2';
document.body.appendChild(canv);
canv.width = cellWidth * 5;
canv.height = cellHeight * 2;
var ctx = canv.getContext('2d');
ctx.strokeStyle = 'black';
ctx.fillStyle = 'rgba(115, 198, 71, .5)';
ctx.beginPath();
ctx.moveTo(cellWidth * 2, 0);
ctx.lineTo(cellWidth * 5, 0);
ctx.lineTo(cellWidth * 5, cellHeight * 2);
ctx.lineTo(0, cellHeight * 2);
ctx.lineTo(0, cellHeight * 1);
ctx.lineTo(cellWidth * 2, cellHeight * 1);
ctx.fill();
ctx.closePath();
ctx.stroke();
}