From bc5f82e960a42fcaba331ee5da3800fce6f72881 Mon Sep 17 00:00:00 2001
From: Jeffrey Sun <jrsun@mit.edu>
Date: Thu, 15 Dec 2016 16:30:59 -0800
Subject: [PATCH] colors and stuff

---
 js/fox.js |  7 ++++++-
 server.js | 14 +++-----------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/js/fox.js b/js/fox.js
index b6a3b01..0f322ad 100644
--- a/js/fox.js
+++ b/js/fox.js
@@ -75,7 +75,12 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT) {
   return {
     canvas: {
       height: IMG_HEIGHT,
-      width: IMG_WIDTH
+      width: IMG_WIDTH,
+      color: hsl(
+        chance.integer({min:120, max:320}),
+        chance.integer({min:50, max:60}),
+        chance.integer({min:30, max:50})
+      )
     },
     head: {
         origin: origin,
diff --git a/server.js b/server.js
index 1ebb6cf..5ec2fc1 100644
--- a/server.js
+++ b/server.js
@@ -57,18 +57,10 @@ function renderHead(ctx, opts) {
     ctx.save();
     ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
     ctx.rotate(Math.PI / 4);
-    var tempCanvas = new Canvas(ctx.canvas.width, ctx.canvas.height);
-    var tempCtx = tempCanvas.getContext('2d');
-    tempCtx.save();
-    tempCtx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
-    tempCtx.rotate(Math.PI / 4);
-    tempCtx.fillStyle = opts.color;
-    tempCtx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-    tempCtx.fill();
-    drawEllipseByCenter(tempCtx, ctx.canvas.width / 2, ctx.canvas.height, 0.1 * ctx.canvas.width, 0 * ctx.canvas.height, '#fff', null, 0.5);
-    var pattern = ctx.createPattern(tempCanvas);
-    drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, opts.color, pattern, opts.kappa);
+    drawEllipseByCenter(ctx, 0, 0, opts.width, opts.height, opts.color, null, opts.kappa);
     ctx.restore();
+    ctx.clip();
+    drawEllipseByCenter(ctx, ctx.canvas.width / 2, ctx.canvas.height, ctx.canvas.width, 0.9 * ctx.canvas.height, '#fff', '#fff', 0.5);
 }
 
 function renderEars(ctx, opts) {