canvas 绘制七巧板

如图, 给出七巧板的各点坐标, 接下来, 通过canvas来绘制这样一个七巧板图形

let pos = [    // 获取各个图形的各点坐标, 以及图形颜色
    {angle: [{x:0,y:0}, {x:250,y:0}, {x:0,y:250}],                      color: 'red'},
    {angle: [{x:250,y:0}, {x:375,y:125}, {x:250,y:250}, {x:125,y:125}], color: 'green'},
    {angle: [{x:250,y:0}, {x:500,y:0}, {x:375,y:125}],                  color: 'blue'},
    {angle: [{x:0,y:250}, {x:125,y:125}, {x:125,y:375}, {x:0,y:500}],   color: 'yellow'},
    {angle: [{x:125,y:125}, {x:250,y:250}, {x:125,y:375}],              color: 'pink'},
    {angle: [{x:250,y:250}, {x:500,y:0}, {x:500,y:500}],                color: '#999'},
    {angle: [{x:0,y:500}, {x:250,y:250}, {x:500,y:500}],                color: '#00a2ff'}
];

function draw (ctx, pos) {
    for (let i = 0; i < pos.length; i++) {
        let angle = pos[i].angle;

        ctx.fillStyle = pos[i].color;
	ctx.strokeStyle = '#000';
	ctx.lineWidth = 5;

	ctx.beginPath();
	ctx.moveTo(angle[0].x, angle[0].y);

	for (let j = 1; j < angle.length; j++) {
	    ctx.lineTo(angle[j].x, angle[j].y);
	}

	ctx.closePath();
	ctx.fill();
	ctx.stroke();
    }
}
let myCanvas = document.getElementById('myCanvas');
		
myCanvas.width = '500';
myCanvas.height = '500';
let ctx = myCanvas.getContext('2d');

window.onload = function () {
    draw(ctx, pos);
}