Bandeira Brasileira

<canvas width="600" height="400"></canvas>

<script>
  var tela = document.querySelector('canvas')
  var pincel = tela.getContext('2d')
  //fundo bandeira
  pincel.fillStyle = 'green'
  pincel.fillRect(0, 0, 600, 400)
  //triângulo 1
  pincel.fillStyle = 'yellow'
  pincel.beginPath()
  pincel.moveTo(300, 50)
  pincel.lineTo(50, 200)
  pincel.lineTo(550, 200)
  pincel.fill()
  //trinângulo 2
  pincel.fillStyle = 'yellow'
  pincel.beginPath()
  pincel.moveTo(300, 350)
  pincel.lineTo(50, 200)
  pincel.lineTo(550, 200)
  pincel.fill()
  //circulo
  pincel.fillStyle = 'darkblue'
  pincel.beginPath()
  pincel.arc(300, 200, 100, 0, 2 * 3.14)
  pincel.fill()
</script>

Bandeira Americana

<canvas width="630" height="403"></canvas>

<script>
  var tela = document.querySelector('canvas')
  var pincel = tela.getContext('2d')

  pincel.fillStyle = 'grey'
  pincel.fillRect(0, 0, 630, 403)
  //Retângulo menor
  pincel.fillStyle = 'darkblue'
  pincel.fillRect(0, 0, 280, 217)
  //listras menores
  pincel.fillStyle = 'red'
  pincel.fillRect(280, 0, 630, 31)

  pincel.fillStyle = 'white'
  pincel.fillRect(280, 31, 630, 31)

  pincel.fillStyle = 'red'
  pincel.fillRect(280, 62, 630, 31)

  pincel.fillStyle = 'white'
  pincel.fillRect(280, 93, 630, 31)

  pincel.fillStyle = 'red'
  pincel.fillRect(280, 124, 630, 31)

  pincel.fillStyle = 'white'
  pincel.fillRect(280, 155, 630, 31)

  pincel.fillStyle = 'red'
  pincel.fillRect(280, 186, 630, 31)
  //listras maiores
  pincel.fillStyle = 'white'
  pincel.fillRect(0, 217, 630, 31)

  pincel.fillStyle = 'red'
  pincel.fillRect(0, 248, 630, 31)

  pincel.fillStyle = 'white'
  pincel.fillRect(0, 278, 630, 31)

  pincel.fillStyle = 'red'
  pincel.fillRect(0, 310, 630, 31)

  pincel.fillStyle = 'white'
  pincel.fillRect(0, 341, 630, 31)

  pincel.fillStyle = 'red'
  pincel.fillRect(0, 372, 630, 31)

  pincel.fillStyle = 'white'
  pincel.fillRect(0, 403, 630, 31)
</script>