2 var page = require('webpage').create();
3 page.viewportSize = { width: 400, height : 400 };
4 page.content = '<html><body><canvas id="surface"></canvas></body></html>';
5 page.evaluate(function() {
6 var el = document.getElementById('surface'),
7 context = el.getContext('2d'),
8 width = window.innerWidth,
9 height = window.innerHeight,
16 i = 0, x, y, rx, ry, d,
17 f, g, p, u, v, w, rgb;
21 imageData = context.createImageData(width, height);
22 pixels = imageData.data;
24 for (y = 0; y < height; y = y + 1) {
25 for (x = 0; x < width; x = x + 1, i = i + 4) {
28 d = rx * rx + ry * ry;
29 if (d < radius * radius) {
30 hue = 6 * (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);
31 sat = Math.sqrt(d) / radius;
35 v = 255 * (1 - sat * f);
36 w = 255 * (1 - sat * (1 - f));
37 pixels[i] = [255, v, u, u, w, 255, 255][g];
38 pixels[i + 1] = [w, 255, 255, v, u, u, w][g];
39 pixels[i + 2] = [u, u, w, 255, 255, v, u][g];
45 context.putImageData(imageData, 0, 0);
46 document.body.style.backgroundColor = 'white';
47 document.body.style.margin = '0px';
50 page.render('colorwheel.png');