var width = 600,height = 600;
var transform = [
        {p: [{x: 0, y: 0}, {x: 0, y: height}, {x: width/2, y: height/2}], color: "#FF3030"},
        {p: [{x: 0, y: 0}, {x: width, y: 0}, {x: width/2, y: height/2}], color: "#FFD700"},
        {p: [{x: 0, y: height}, {x: width/2, y: height}, {x: width/4, y: height/4*3}], color: "#EE00EE"},
        {p: [{x: width/2, y: height}, {x: width, y: height}, {x: width, y: height/2}], color: "#8B4500"},
        {p: [{x: width/2, y: height}, {x: width/4*3, y: height/4*3}, {x: width/2, y: height/2}, {x: width/4, y: height/4*3}], color: "#87CEEB"},
        {p: [{x: width/2, y: height/2}, {x: width/4*3, y: height/4}, {x: width/4*3, y: height/4*3}], color: "#458B00"},
        {p: [{x: width, y: 0}, {x: width/4*3, y: height/4}, {x: width/4*3, y: height/4*3}, {x: width, y: height/2}], color: "#1C86EE"}
    ];

window.onload = function () {
        var canvas = document.getElementById("canvas");
        canvas.width = width;
        canvas.height = height;
        var context = canvas.getContext('2d');

        for (var i = 0; i < transform.length; i++) {
            var route = transform[i];
            draw(route, context);
        }
    };

    function draw(route, ctx) {
        ctx.beginPath();
        ctx.moveTo(route.p[0].x, route.p[0].y);
        for (var i = 1; i < route.p.length; i++) {
            var path = route.p[i];
            ctx.lineTo(path.x, path.y);
        }
        ctx.closePath();
        ctx.fillStyle = route.color;
        ctx.fill();
        ctx.strokeStyle = "#000";
        ctx.stroke();
    }