Bandera con Canvas y Javascript

Comparto script de bandera realizada con Canvas y Javascrip Se compone de tres franjas horizontales y un sol de 32 rays en su interior.

<meta charset="utf-8" />

<canvas name="canvas"> </canvas>

<script>
  var pantalla = document.getElementsByTagName("canvas")[0];
  var pincel = pantalla.getContext("2d");

  var ratio = 2.5;
  var width = 140 * ratio;
  var height = 90 * ratio;
  var r1 = 5 * ratio;
  var r2 = 12.5 * ratio;

  //Asignamos ancho y alto a recuadro canvas
  pantalla.width = width;
  pantalla.height = height;

  //Dibujamos tres franjas horizontales
  pincel.fillStyle = "rgb(102, 255, 255)";
  pincel.fillRect(0, 0, width, height / 3);

  pincel.fillStyle = "white";
  pincel.fillRect(0, height / 3, width, height / 3);

  pincel.fillStyle = "rgb(102, 255, 255)";
  pincel.fillRect(0, 2 * (height / 3), width, height / 3);

  //Dibujamos círculo central del sol
  pincel.fillStyle = "yellow";
  pincel.beginPath();
  pincel.arc(width / 2, height / 2, r1, 0, 2 * Math.PI);
  pincel.fill();

  //Dibujamos rayos del sol
  var rayosCan = 32;
  var avance = (2 * parseFloat(Math.PI)) / rayosCan;

  pincel.beginPath();
  pincel.moveTo(width / 2, height / 2);

  for (var i = 0; i < 32; i++) {
    pincel.beginPath();
    pincel.moveTo(width / 2, height / 2);
    var angulo = avance * i;

    x = r2 * Math.sin(angulo);
    y = r2 * Math.cos(angulo);

    pincel.strokeStyle = "yellow";
    if (i % 2 === 0) {
      pincel.lineTo(width / 2 - x, height / 2 - y);
    } else {
      pincel.lineTo(width / 2 - x, height / 2 - y);
    }
    pincel.stroke();
  }
</script>