xkcd challenge: "Percentage of the screen that is [x] color"
JavaScript with HTML

I tried to reproduce the original comic more precisely. A screenshot is taken using the html2canvas library. The numbers are calculated repeatedly, so you can resize the window or even add something to page in real time.

Try it online: http://copy.sh/xkcd-688.html

Here's a screenshot:



&lt;html contenteditable&gt;
&lt;script src=http://html2canvas.hertzen.com/build/html2canvas.js&gt;&lt;/script&gt;
&lt;script&gt;
onload = function() {
    setInterval(k, 750);
    k();
}
function k() {
    html2canvas(document.body, { onrendered: t });
}
function t(c) {
    z.getContext("2d").drawImage(c, 0, 0, 300, 150);
    c = c.getContext("2d").getImageData(0, 0, c.width, c.height).data;

    for(i = y = 0; i &lt; c.length;) 
        y += c[i++];

    y /= c.length * 255;

    x.textContent = (y * 100).toFixed(6) + "% of this website is white";

    q = g.getContext("2d");

    q.fillStyle = "#eee";
    q.beginPath();
    q.moveTo(75, 75);
    q.arc(75,75,75,0,7,false);
    q.lineTo(75,75);
    q.fill();

    q.fillStyle = "#000";
    q.beginPath();
    q.moveTo(75, 75);
    q.arc(75,75,75,0,6.28319*(1-y),false);
    q.lineTo(75,75);
    q.fill();
}
&lt;/script&gt;
&lt;center&gt;
&lt;h2 id=x&gt;&lt;/h2&gt;
&lt;hr&gt;
&lt;table&gt;&lt;tr&gt;
&lt;td&gt;Fraction of&lt;br&gt;this website&lt;br&gt;which is white _/
&lt;td&gt;&lt;canvas width=150 id=g&gt;&lt;/canvas&gt;
&lt;td&gt;&amp;nbsp; Fraction of&lt;br&gt;- this website&lt;br&gt;&amp;nbsp; which is black
&lt;/table&gt;
&lt;hr&gt;
0
&lt;canvas style="border-width: 0 0 1px 1px; border-style: solid" id=z&gt;&lt;/canvas&gt;
&lt;h4&gt;Location of coloured pixels in this website&lt;/h4&gt;