# Flags with Stars

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

In these exercises you can use a function star which draws a five pointed star on the canvas.

You can control the position of the star by calling the transform method of ctx.

## Vietnam

The flag of Vietnam has a yellow five pointed star on a red. background.

The function call start(ctx) will fill a star of radius 50 centred (0,0).

• You can use the call ctx.translate(100,75) to move the star to the right place
• You can use the call ctx.scale(0.5,0.5) to make the star the right size

Documentation: translate scale

```function drawFlag(ctx)
{
ctx.fillStyle = 'red';
ctx.translate(50,50);
star(ctx);
}

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 = 'red';
ctx.fillRect(0,0,200,150);
ctx.translate(100,75);
ctx.fillStyle='yellow';
ctx.scale(0.5,0.5);
star(ctx);
}

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();
}
```

## Myanmar

• 180 by 120
• The centre of the star is (90,64)
• The radius is of the star is 44
• Colours are rgb(255,218,35) rgb(69,182,83) rgb(239,80,73) and white

```function drawFlag(ctx)
{
}

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 = 'rgb(255,218,35)';
ctx.fillRect(0,0,180,40);
ctx.fillStyle = 'rgb(69,182,83)';
ctx.fillRect(0,40,180,80);
ctx.fillStyle = 'rgb(239,80,73)';
ctx.fillRect(0,80,180,120);
ctx.fillStyle = 'white';
let r  = 80*(Math.sqrt(5)-1)/Math.sqrt(5);
ctx.translate(90,64);
ctx.scale(0.44,0.44);
star(ctx);
}

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();
}
```

## Panama

These stars have a radius of 25.

```function drawFlag(ctx)
{
}

function star(ctx)
{
ctx.beginPath();
[ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
[ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
ctx.fill();
}
```
```function drawFlag(ctx)
{
ctx.fillStyle = 'white';
ctx.fillRect(0,0,240,160);
ctx.fillStyle = 'red';
ctx.fillRect(120,0,120,80);
ctx.translate(180,120);
ctx.scale(0.25,0.25);
star(ctx);
ctx.scale(4,4);
ctx.translate(-180,-120);
ctx.fillStyle = 'blue';
ctx.fillRect(0,80,120,80);
ctx.translate(60,40);
ctx.scale(0.25,0.25);
star(ctx);
ctx.scale(4,4);
}

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();
}
```

## Bosnia and Herzegovina

The flag of Bosnia and Herzegovina includes 9 white stars. Each star is 38 right and 38 below the previous star.

```function drawFlag(ctx)
{
}

function star(ctx)
{
ctx.beginPath();
[ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
[ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
ctx.fill();
}
```
```function drawFlag(ctx)
{
ctx.fillStyle='blue';
ctx.fillRect(0,0,600,304);
ctx.fillStyle='yellow';
ctx.moveTo(160,0);
ctx.lineTo(464,0);
ctx.lineTo(464,304);
ctx.fill();
ctx.fillStyle='white';
ctx.translate(105,0);
for(let i=0;i<9;i++){
star(ctx);
ctx.translate(38,38);
}
}

function star(ctx)
{
ctx.beginPath();
[ [ 0,-25],[6,-8],[24,-8],[9,3],[15,20],
[ 0,9],[-15,20],[-9,3],[-24,-8],[-6,-8]
].forEach((xy) => ctx.lineTo(xy[0],xy[1]));
ctx.fill();
}
```

## Democratic Republic of Congo (formerly Zaire)

• The large star has a radius of 100
• The 6 smaller stars have a radius of 10.
• The background color is rgb: 173,216,230
• You can use scale to draw smaller stars

The are the points of a star radius 100:

``` [[0,-100],[22,-31],[95,-31],[36,12],[59,81],
[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
```

```function drawFlag(ctx)
{
}
```
```function drawFlag(ctx)
{
ctx.fillStyle = 'rgb(173,216,230)';
ctx.fillRect(0,0,500,300);
ctx.fillStyle = 'yellow';
ctx.translate(250,150);
star(ctx);
ctx.translate(-250,-150);
ctx.translate(50,25);
ctx.scale(0.1,0.1);
star(ctx);
ctx.translate(0,500);
star(ctx);
ctx.translate(0,500);
star(ctx);
ctx.translate(0,500);
star(ctx);
ctx.translate(0,500);
star(ctx);
ctx.translate(0,500);
star(ctx);
}

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();
}
```