Road Sign Square

From ProgZoo

Revision as of 17:05, 19 August 2021 by Andr3w (talk | contribs) (→Road Sign Version 1)

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

Jump to navigation Jump to search

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}}

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

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)

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