Canvas on NodeJS

by John Schulz

HTML

<img src="http://jsno.de/flot?options={%22width%22:320,%22height%22:100,%22yaxis%22:{%22labelWidth%22:25}}" /> 

<p>Thanks to TJ Holowaychuk's <a href="https://github.com/learnboost/node-canvas">node-canvas</a>, the <code>&lt;canvas&gt;</code> element can now be used in NodeJS. Rendering visual elements on the server might seem backwards, but there are some key benefits: 
    <ul> 
        <li><em>Increased support</em> Not all browsers support canvas, but every browser supports the <code>&lt;img&gt;</code> tag</li> 
        <li><em>Security</em> Using an <code>&lt;img&gt;</code> prevents the transfer of human-readable data</li> 
        <li><em>Dynamic charts without an <code>&lt;iframe&gt;</code></em> Create a dashboard of charts (signups over the last X days, sales in the last Y hours) simply by adding a few <code>&lt;img&gt;</code> tags</li> 
        <li><em>Code Reuse</em> Because you're using the <em>exact same library</em> one the client and server, your images will be identical no matter where they were rendered and with minimal additional effort.</li> 
    </ul> 
    <p>In this session, we'll learn how to make works of art on the server-side identical to those rendered on the client side. 
        <p>We'll go through what's required to get node-canvas installed and how to port some existing libraries (<a href="http://code.google.com/p/flot/">flot</a> in particular) so that they can be run on NodeJS.

JavaScript

// No JS required