Shaped character

HTML

<html>
 <body onload="draw();">
   <canvas id="canvas"></canvas>
 </body>
</html>

CSS

body {
		margin: 0px;
		padding: 0px;
		background-color: #000000
	}
	canvas {
		padding: 0;
		margin: auto;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

JavaScript

var guns = {
	"shotgun": {
  	"color": "#000",
    "width": 38,
    "height": 2,
  	"rects": {
      "left": [
        {x: 0, y:0, w: 5, h: 3},
        {x: 5, y:0, w: 15, h: 4},
        {x: 20, y:0, w: 7, h: 2},
        {x: 27, y:0, w: 3, h: 5},
        {x: 30, y:0, w: 8, h: 7}
      ],
      "right": [
        {x: 70, y:0, w: 5, h: 3},
        {x: 55, y:0, w: 15, h: 4},
        {x: 48, y:0, w: 7, h: 2},
        {x: 45, y:0, w: 3, h: 5},
        {x: 37, y:0, w: 8, h: 7}
      ],
    },
    "arms": {
    	"left": [
        {x: 10, y: 2, w: 7, h: 3},
        {x: 20, y: 2, w: 7, h: 4},
        {x: 25, y: 5, w: 15, h: 3}
      ],
      "right": [
        {x: 58, y: 2, w: 7, h: 3},
        {x: 48, y: 2, w: 7, h: 4},
        {x: 35, y: 5, w: 15, h: 3}
      ]
    }
  },
  "pistol": {
  	"color": "#000",
    "width": 30,
    "height": 2,
    "rects": {
      "left": [
        {x: 0, y:0, w: 6, h: 3},
        {x: 6, y:0, w: 5, h: 2},
        {x: 9, y:2, w: 2, h: 5},
        {x: 7, y:3, w: 2, h: 4}
      ],
      "right": [
        {x: 0, y:0, w: 6, h: 3},
        {x: 6, y:0, w: 5, h: 2},
        {x: 9, y:2, w: 2, h: 5},
        {x: 7, y:3, w: 2, h: 4}
      ],
    },
    "arms": {
    	"left": [
        {x: 6, y: 2, w: 6, h: 4},
        {x: 12, y: 3, w: 20, h: 3},
        {x: 10, y: 0, w: 11, h: 3}
      ],
      "right": [
        {x: 6, y: 2, w: 6, h: 4},
        {x: 12, y: 3, w: 20, h: 3},
        {x: 10, y: 0, w: 11, h: 3}
      ]
    }
  }
}

function human() {

  	this.gun = undefined;
    this.pos = {x: 25, y: 25, face: 'lf'};
    this.head = {
      color: "#f7c19b",
      height: 12,
      width: 8,
      lf: {x: 2, y: -11, width: 8, height: 12},
      lb: {x: 2, y: -11, width: 8, height: 11},
      rf: {x: 4, y: -11, width: 8, height: 12},
      rb: {x: 4, y: -11, width: 8, height: 11},
    };
    this.torso_top = {
      color: "#9a9a9a",
      height: 15,
      width: 16,
      lf: {x: -1, y: 0, width: 16, height: 15},
      lb: {x: -1, y: 0, width: 16,...