Arrix

$(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)';