Road Sign Square

1) Road Sign Version 1

• The yellow square has side 150, the radius of the corner is 40.
• The black square is 100, the line width is 16.
• The yellow is rgb(255,227,0)

{{#ev:youtube|7H-BcvEBmZ8}}

Input

function drawFlag(ctx){ ctx.fillStyle = 'rgb(255,227,0)'; ctx.fillRect(0,0,150,150); ctx.lineWidth = 16; ctx.strokeStyle = 'black'; ctx.moveTo( 25, 25); ctx.lineTo(125, 25); ctx.lineTo(125,125); ctx.lineTo( 25,125); ctx.closePath(); ctx.stroke(); }

​x

 

1

function drawFlag(ctx){

2

  ctx.fillStyle = 'rgb(255,227,0)';

3

  ctx.fillRect(0,0,150,150);

4

  ctx.lineWidth = 16;

5

  ctx.strokeStyle = 'black';

6

  ctx.moveTo( 25, 25);

7

  ctx.lineTo(125, 25);

8

  ctx.lineTo(125,125);

9

  ctx.lineTo( 25,125);

10

  ctx.closePath();

11

  ctx.stroke();

12

}

13

​

Go reset

Output

function drawFlag(ctx){
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.fillRect(0,0,150,150);
  ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
  ctx.moveTo( 25, 25);
  ctx.lineTo(125, 25);
  ctx.lineTo(125,125);
  ctx.lineTo( 25,125);
  ctx.closePath();
  ctx.stroke();
}

function drawFlag(ctx){
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.fillRect(0,0,150,150);
  ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
  ctx.moveTo( 25, 25);
  ctx.lineTo(125, 25);
  ctx.lineTo(125,125);
  ctx.lineTo( 25,125);
  ctx.closePath();
  ctx.stroke();
}

2) Get it right

• The drawing surface is 160 y 160
• The yellow square has side 150, the radius of the corner is 20.
• The black square is 100, the line width is 16.
• The yellow is rgb(255,227,0)

Input

function drawFlag(ctx){ ctx.fillStyle = 'rgb(255,227,0)'; ctx.fillRect(0,0,150,150); ctx.lineWidth = 16; ctx.strokeStyle = 'black'; ctx.moveTo( 25, 25); ctx.lineTo(125, 25); ctx.lineTo(125,125); ctx.lineTo( 25,125); ctx.closePath(); ctx.stroke(); }

xxxxxxxxxx

 

1

function drawFlag(ctx){

2

  ctx.fillStyle = 'rgb(255,227,0)';

3

  ctx.fillRect(0,0,150,150);

4

  ctx.lineWidth = 16;

5

  ctx.strokeStyle = 'black';

6

  ctx.moveTo( 25, 25);

7

  ctx.lineTo(125, 25);

8

  ctx.lineTo(125,125);

9

  ctx.lineTo( 25,125);

10

  ctx.closePath();

11

  ctx.stroke();

12

}

13

​

Go reset

Output

function drawFlag(ctx){
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.fillRect(0,0,150,150);
  ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
  ctx.moveTo( 25, 25);
  ctx.lineTo(125, 25);
  ctx.lineTo(125,125);
  ctx.lineTo( 25,125);
  ctx.closePath();
  ctx.stroke();
}

function drawFlag(ctx){
  ctx.fillStyle = 'rgb(255,227,0)';
  ctx.fillRect(0,0,150,150);
  ctx.lineWidth = 16;
  ctx.strokeStyle = 'black';
  ctx.moveTo( 25, 25);
  ctx.lineTo(125, 25);
  ctx.lineTo(125,125);
  ctx.lineTo( 25,125);
  ctx.closePath();
  ctx.stroke();
}