Flag EU
1) Flag of Europe (nearly)

Input
x
function drawFlag(ctx){
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,150,100);
ctx.translate(75,50);
ctx.fillStyle = 'gold';
for(let i = 0;i<12; i++){
ctx.translate(0,-50*2/3);
ctx.scale(7/100,7/100);
star(ctx);
ctx.scale(100/7,100/7);
ctx.translate(0,50*2/3);
ctx.rotate(Math.PI/6);
}
}
function star(ctx)
{
ctx.beginPath();
[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
.forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
ctx.fill();
}
Output
function drawFlag(ctx){ ctx.fillStyle = 'blue'; ctx.fillRect(0,0,150,100); ctx.translate(75,50); ctx.fillStyle = 'gold'; for(let i = 0;i<12; i++){ ctx.translate(0,-50*2/3); ctx.scale(7/100,7/100); star(ctx); ctx.scale(100/7,100/7); ctx.translate(0,50*2/3); ctx.rotate(Math.PI/6); } } function star(ctx) { ctx.beginPath(); [[0,-100],[22,-31],[95,-31],[36,12],[59,81], [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]] .forEach((xy)=>ctx.lineTo(xy[0],xy[1])); ctx.fill(); }
function drawFlag(ctx){ ctx.fillStyle = 'blue'; ctx.fillRect(0,0,150,100); ctx.translate(75,50); ctx.fillStyle = 'gold'; for(let i = 0;i<12; i++){ ctx.translate(0,-50*2/3); ctx.scale(7/100,7/100); star(ctx); ctx.scale(100/7,100/7); ctx.translate(0,50*2/3); ctx.rotate(Math.PI/6); } } function star(ctx) { ctx.beginPath(); [[0,-100],[22,-31],[95,-31],[36,12],[59,81], [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]] .forEach((xy)=>ctx.lineTo(xy[0],xy[1])); ctx.fill(); }
2) Flag of Europe

Input
xxxxxxxxxx
function drawFlag(ctx){
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,150,100);
ctx.translate(75,50);
ctx.fillStyle = 'gold';
for(let i = 0;i<12; i++){
ctx.translate(0,-50*2/3);
ctx.scale(7/100,7/100);
star(ctx);
ctx.scale(100/7,100/7);
ctx.translate(0,50*2/3);
ctx.rotate(Math.PI/6);
}
}
function star(ctx)
{
ctx.beginPath();
[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
.forEach((xy)=>ctx.lineTo(xy[0],xy[1]));
ctx.fill();
}
Output
function drawFlag(ctx){ ctx.fillStyle = 'blue'; ctx.fillRect(0,0,150,100); ctx.translate(75,50); ctx.fillStyle = 'gold'; for(let i = 0;i<12; i++){ ctx.translate(0,-50*2/3); ctx.scale(7/100,7/100); star(ctx); ctx.scale(100/7,100/7); ctx.translate(0,50*2/3); ctx.rotate(Math.PI/6); } } function star(ctx) { ctx.beginPath(); [[0,-100],[22,-31],[95,-31],[36,12],[59,81], [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]] .forEach((xy)=>ctx.lineTo(xy[0],xy[1])); ctx.fill(); }
function drawFlag(ctx){ ctx.fillStyle = 'blue'; ctx.fillRect(0,0,150,100); ctx.translate(75,50); ctx.fillStyle = 'gold'; for(let i = 0;i<12; i++){ ctx.translate(0,-50*2/3); ctx.scale(7/100,7/100); star(ctx); ctx.scale(100/7,100/7); ctx.translate(0,50*2/3); ctx.rotate(Math.PI/6); } } function star(ctx) { ctx.beginPath(); [[0,-100],[22,-31],[95,-31],[36,12],[59,81], [0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]] .forEach((xy)=>ctx.lineTo(xy[0],xy[1])); ctx.fill(); }