Adding a registered template to a dynamically drawn 3-player chessboard

Question

Hi, a bunch of wonderful geniuses!

I seem to have reached the peak of my knowledge here and hoped that someone could point me in the right direction.

I am trying to dynamically draw a 3-chess chessboard using JavaScript and HTML 5 canvas.

So far I have come up with this;

var canvas = document.getElementById('canvas')
var length = canvas.height / 2;
var center = canvas.width / 2;

var rotation = ToRadians(60);

var angle = ToRadians(30);
var height = length * Math.cos(angle);
var width = length * Math.sin(angle);
while (rotation < Math.PI * 2) {
    a = [center, length];
    b = [a[0] - height * Math.sin(rotation), a[1] + height * Math.cos(rotation)];
    c = [b[0] + width * Math.cos(rotation), b[1] + width * Math.sin(rotation)];
    d = [c[0] + width * Math.sin(angle + rotation), c[1] - width * Math.cos(angle + rotation)];

    //Drawing Main Frame and 6 segments
    var c2 = canvas.getContext('2d');
    c2.fillStyle = '#f00';
    c2.strokeStyle = "#0f0";
    c2.beginPath();
    c2.moveTo(a[0], a[1]);
    c2.lineTo(b[0], b[1]);
    c2.lineTo(c[0], c[1]);
    c2.lineTo(d[0], d[1]);
    c2.closePath();
    c2.stroke();

    //Drawing first set of divides
    ab1=[((a[0]+b[0])/2),((a[1]+b[1])/2)]
    cd1=[((c[0]+d[0])/2),((c[1]+d[1])/2)]
    ab2=[((a[0]+ab1[0])/2),((a[1]+ab1[1])/2)]
    cd2=[((d[0]+cd1[0])/2),((d[1]+cd1[1])/2)]
    ab3=[((b[0]+ab1[0])/2),((b[1]+ab1[1])/2)]
    cd3=[((c[0]+cd1[0])/2),((c[1]+cd1[1])/2)]

    c2.beginPath();
    c2.moveTo(ab1[0], ab1[1]);
    c2.lineTo(cd1[0], cd1[1]);        
    c2.moveTo(ab2[0], ab2[1]);
    c2.lineTo(cd2[0], cd2[1]);    
    c2.moveTo(ab3[0], ab3[1]);
    c2.lineTo(cd3[0], cd3[1]);   
    c2.stroke();

    //Drawing second set of divides
    bc1=[((c[0]+b[0])/2),((c[1]+b[1])/2)]
    ad1=[((a[0]+d[0])/2),((a[1]+d[1])/2)]
    bc2=[((c[0]+bc1[0])/2),((c[1]+bc1[1])/2)]
    ad2=[((d[0]+ad1[0])/2),((d[1]+ad1[1])/2)]
    bc3=[((b[0]+bc1[0])/2),((b[1]+bc1[1])/2)]
    ad3=[((a[0]+ad1[0])/2),((a[1]+ad1[1])/2)]

    c2.beginPath();
    c2.moveTo(bc1[0], bc1[1]);
    c2.lineTo(ad1[0], ad1[1]);        
    c2.moveTo(bc2[0], bc2[1]);
    c2.lineTo(ad2[0], ad2[1]);    
    c2.moveTo(bc3[0], bc3[1]);
    c2.lineTo(ad3[0], ad3[1]);   
    c2.stroke();

    rotation += ToRadians(60);
}
function ToRadians(degrees) {
    return degrees / (180 / Math.PI);
}

Fiddle: http://jsfiddle.net/yd7Wv/6529/

, , , . , , , - . , , , ! .

Answer 1

, , .

( "" ) , .

:

, .

var w = canvas.width,                // width
    h = canvas.height,               // height
    cx = w * 0.5,                    // center of board
    cy = h * 0.5,
    r = cx * 0.9,                    // radius of board
    pi2 = Math.PI * 2,               // cache
    segments = 6,                    // a hexagon based shape so 6
    segment = pi2 / segments,        // angle of each segment
    hSegment = segment * 0.5,        // half segment for center line
    ul, ur, bl, br,                  // quad. corners
    check = 0.25,                    // interpolation interval (one check)
    yc = 0, xc = 0,                  // interpolation counters
    toggle = false,                  // for color
    x, y = 0, i = 0;                 // counters...

, :

, :

var ul = {
    x: cx,
    y: cy}

:

ur = {
    x: cx + r * Math.cos(hSegment) * 0.865,
    y: cy + r * Math.sin(hSegment) * 0.865
};

:

br = {
    x: cx + r * Math.cos(segment),
    y: cy + r * Math.sin(segment)
};

, :

bl = {
    x: cx + r * Math.cos(hSegment + segment) * 0.865,
    y: cy + r * Math.sin(hSegment + segment) * 0.865
};

, :

, , (0.25), 5 . 4, .

, [0.0, 1.0]:

function getInt(p1, p2, t) {
    return {
        x: p1.x + (p2.x - p1.x) * t,
        y: p1.y + (p2.y - p1.y) * t,
    }
}

y x, :

for(y = 0, yc = 0; y < 4; y++) {
    for(x = 0, xc = 0; x < 4; x++) {

        // for upper lines (ul-ur), get first row:
        var l1a = getInt(ul, bl, yc), 
            l1b = getInt(ur, br, yc),
            l2a = getInt(ul, bl, yc + check),
            l2b = getInt(ur, br, yc + check),

            c1 = getInt(l1a, l1b, xc),
            c2 = getInt(l1a, l1b, xc + check),
            c3 = getInt(l2a, l2b, xc + check),
            c4 = getInt(l2a, l2b, xc);

        ... draw shape ...

        xc += check;
    }
    yc += check;        
}

:

var l1a = getInt(ul, bl, yc),          // current line [0, 3]
    l1b = getInt(ur, br, yc),
    l2a = getInt(ul, bl, yc + check),  // next line [1, 4]
    l2b = getInt(ur, br, yc + check),

. , "":

c1 = getInt(l1a, l1b, xc),          // corner 1 UL
c2 = getInt(l1a, l1b, xc + check),  // corner 2 UR (next line)
c3 = getInt(l2a, l2b, xc + check),  // corner 3 BR (next line)
c4 = getInt(l2a, l2b, xc);          // corner 4 BL

:

ctx.beginPath();
ctx.moveTo(c1.x, c1.y);
ctx.lineTo(c2.x, c2.y);
ctx.lineTo(c3.x, c3.y);
ctx.lineTo(c4.x, c4.y);

ctx.fillStyle = toggle ? '#000' : '#fff';

.

:

- . .

, :

for(; i < segments; i++) {    // loop six segments
    toggle = !toggle;         // alter color each segment
    // loop quadrilateral grid 4x4 cells (5x5 lines exclusive)
    for(y = 0, yc = 0; y < 4; y++) {
        for(x = 0, xc = 0; x < 4; x++) {

            // for upper lines (ul-ur), get first row:
            var l1a = getInt(ul, bl, yc),
                l1b = getInt(ur, br, yc),
                l2a = getInt(ul, bl, yc + check),
                l2b = getInt(ur, br, yc + check),
                c1 = getInt(l1a, l1b, xc),
                c2 = getInt(l1a, l1b, xc + check),
                c3 = getInt(l2a, l2b, xc + check),
                c4 = getInt(l2a, l2b, xc);

            ctx.beginPath();
            ctx.moveTo(c1.x, c1.y);
            ctx.lineTo(c2.x, c2.y);
            ctx.lineTo(c3.x, c3.y);
            ctx.lineTo(c4.x, c4.y);
            ctx.fillStyle = toggle ? '#000' : '#fff';
            ctx.fill();
            toggle = !toggle;
            xc += check;
        }
        yc += check;          // next segment line
        toggle = !toggle;     // toggle per line as well
    }
    ctx.translate(cx, cy);    // translate to center
    ctx.rotate(segment);      // rotate one segment
    ctx.translate(-cx, -cy);  // translate back
}

, , ..