Add node-canvas help increase the testable surface

This is at least a first step towards fixing xtermjs#1247. This adds some
complexity to the initial setup, since canvas needs to be built from
source.

This won't be true once canvas 2.x is stabilized, because that version
downloads (Automattic/node-canvas#992). JSDom doesn't support 2.x, and
doesn't plan to (jsdom/jsdom#1964) until a stable release is cut.

We could use
[canvas-prebuilt](https://github.com/node-gfx/node-canvas-prebuilt),
which JSDom does appear to support. However, I'm not sure if that would
cause pain for people with 32-bit operating systems (see the
compatibility table on that page).

I'm not sure if this travis configuration will work; I'll iterate on it
in the PR if it fails. I removed a bunch of hacks that were added
in xtermjs#690, since they don't look necessary anymore (the sleep module is
gone).

.travis.yml

@@ -4,12 +4,20 @@ os:
 node_js:
   - 6
 before_install:
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo add-apt-repository -y ppa:ubuntu-toolchain-r/test ; fi
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get -qq update ; fi
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sudo apt-get -qq install g++-4.8 ; fi
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export CXX=g++-4.8 ; fi
   - npm install -g npm@5.1.0
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - libcairo2-dev
+      - libjpeg8-dev
+      - libpango1.0-dev
+      - libgif-dev
+      - g++-4.9
 env:
+  global:
+    - CXX=g++-4.9
   matrix:
     - NPM_COMMAND=tsc
     - NPM_COMMAND=lint

README.md

@@ -185,7 +185,19 @@ Then open http://0.0.0.0:3000 in a web browser to access the demo.
 
 ### Linux or macOS
 
-First, be sure that a C++ compiler such as GCC-C++ or Clang is installed, then run the following commands in your terminal:
+First, be sure that a C++ compiler such as GCC-C++ or Clang is installed.
+
+Then, depending on your operating system and distribution, run one of the following:
+
+OS | Command
+----- | -----
+OS X | Using [Homebrew](https://brew.sh/):<br/>`brew install pkg-config cairo pango libpng jpeg giflib`<br/><br/>Using [MacPorts](https://www.macports.org/):<br/>`port install pkgconfig cairo pango libpng jpeg giflib`
+Ubuntu | `sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++`
+Fedora | `sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel`
+
+*This table is borrowed from [the node-canvas documentation](https://github.com/Automattic/node-canvas/blob/master/Readme.md#compiling).*
+
+Then run the following commands in your terminal:
 
 ```
 npm install
@@ -197,7 +209,7 @@ Then open http://0.0.0.0:3000 in a web browser to access the demo.
 
 ### Windows
 
-First, ensure [node-gyp](https://github.com/nodejs/node-gyp) is installed and configured correctly, then run the following commands in your terminal:
+First, [follow the node-canvas setup instructions](https://github.com/Automattic/node-canvas/wiki/Installation---Windows), then run the following commands in your terminal:
 
 ```
 npm install

package.json

@@ -45,6 +45,7 @@
     "@types/node": "^6.0.41",
     "@types/text-encoding": "0.0.32",
     "browserify": "^13.3.0",
+    "canvas": "^1.6.10",
     "chai": "3.5.0",
     "express": "4.13.4",
     "express-ws": "2.0.0-rc.1",

src/renderer/ColorManager.test.ts

@@ -17,17 +17,6 @@ describe('ColorManager', () => {
     dom = new jsdom.JSDOM('');
     window = dom.window;
     document = window.document;
-    (<any>window).HTMLCanvasElement.prototype.getContext = () => ({
-      createLinearGradient(): any {
-        return null;
-      },
-
-      fillRect(): void { },
-
-      getImageData(): any {
-        return {data: [0, 0, 0, 0xFF]};
-      }
-    });
     cm = new ColorManager(document, false);
   });
 
@@ -309,5 +298,17 @@ describe('ColorManager', () => {
       // FG reverts back to default
       assert.equal(cm.colors.foreground.css, '#ffffff');
     });
+
+    it('should parse rgb colors', () => {
+      cm.setTheme({
+        background: '#123456',
+        foreground: 'rgb(111, 222, 33)'
+      });
+      assert.equal(cm.colors.background.rgba, 0x123456FF);
+      assert.equal(cm.colors.foreground.rgba >>> 24, 111);
+      assert.equal(cm.colors.foreground.rgba >>> 16 & 0xFF, 222);
+      assert.equal(cm.colors.foreground.rgba >>> 8 & 0xFF, 33);
+      assert.equal(cm.colors.foreground.rgba & 0xFF, 0xFF);
+    });
   });
 });