The Geekdom logo in native js. Used this as a reference: http://i.imgur.com/Ya1F7kN.png

geekdom-logo-300x300.js

// Created by Jason Straughan: JDStraughan.com
// Logo is from Geekdom: http://geekdom.com/
// See this code in action: http://jsfiddle.net/3SSfn/3/
//
// Requries a 300x300 canvas element with id of 'logo'

var canvas = document.getElementById("logo");
var context = canvas.getContext("2d");

var logo = {
    
    bkgrdColor: '#000',
    jewelColor: '#F00',
    crownColor: '#FFF',
    
    draw: function() {
      this.createBackground();
      this.drawJewels();
      this.drawCrown();
    },
    
    createBackground: function() {
      context.fillStyle = this.bkgrdColor;
      context.fillRect(0, 0, canvas.width, canvas.height);
    },
    
    drawCircle: function(x, y, radius, color) {
      context.fillStyle = color;
      context.beginPath();
      context.arc(x, y, radius, 0, 2 * Math.PI, false);
      context.fill();
    },
    
    drawJewels: function() {
      this.drawCircle(50, 70, 6, this.jewelColor);
      this.drawCircle(105, 70, 6, this.jewelColor);
      this.drawCircle(165, 75, 12, this.jewelColor);
      this.drawCircle(230, 100, 6, this.jewelColor);
      this.drawCircle(275, 130, 6, this.jewelColor);
    },
    
    drawCrown: function() {
      context.fillStyle = this.crownColor;
      context.beginPath();
      context.moveTo(200, 235);
      context.arcTo(145, 155, 55, 190, 125);
      context.lineTo(50, 85);
      context.lineTo(80, 140);
      context.lineTo(105, 85);
      context.lineTo(125, 150);
      context.lineTo(160, 95);
      context.lineTo(170, 160);
      context.lineTo(220, 115);
      context.lineTo(210, 180);
      context.lineTo(265, 140);
      context.closePath();
      context.fill();
    }
}

logo.draw();