Near Infinity logo using HTML5 canvas

canvas-logo.html

<canvas id='logo' width="250" height="100">
</canvas>

<script>
  var canvas = document.getElementById('logo');
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    // Draw black oval
    ctx.save();
    ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.scale(1.75, 1);
    ctx.beginPath();
    ctx.arc(35, 51, 30, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
    ctx.restore();

    // Draw white oval inside black
    ctx.save();
    ctx.fillStyle = "rgba(255, 255, 255, 1)";
    ctx.scale(1.75, 1);
    ctx.beginPath();
    ctx.arc(42, 47, 17, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
    ctx.restore();

    // Draw orange oval
    ctx.save();
    ctx.fillStyle = "rgba(237, 128, 39, 1)";
    ctx.scale(1.75, 1);
    ctx.beginPath();
    ctx.arc(92, 37, 30, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
    ctx.restore();

    // Draw white oval inside orange
    ctx.save();
    ctx.fillStyle = "rgba(255, 255, 255, 1)";
    ctx.scale(1.75, 1);
    ctx.beginPath();
    ctx.arc(82, 40, 17, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
    ctx.restore();
  }
</script>