title: nodejs: Update html5 canvas whiteboard using socket.io
body: <p>I am trying to create an interactive whiteboard app. What I want it to do is that whatever is drawn on sender.html should get updated on receiver.html but it isn't working. This is the code - </p>
  
  <blockquote>
    <p>sender.html and iwb-sender.js</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var socket;
  
  function startSocket() {
    socket = io.connect();
  }
  
  function sendData(coordx, coordy, actualColor) {
    var data = { x: coordx, y: coordy, color: actualColor };
    socket.emit("iwb-message", data);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;A web whiteboard&lt;/title&gt;
  &lt;meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"&gt;&lt;meta charset="utf-8"&gt;
  
      &lt;script src="https://cdn.socket.io/socket.io-1.3.2.js"&gt;&lt;/script&gt;
      &lt;script src="wb/wb-client.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="iwb/iwb-sender.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/libs/jscolor/jscolor.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="a.css"&gt;
      &lt;style type="text/css"&gt;
        #pizarra { position: relative; }
      &lt;/style&gt;
  
  
  &lt;link rel="icon" type="image/png" href="/static/favicon.ico"&gt;
  &lt;link rel="apple-touch-icon" href="/static/apple-touch-icon-57x57.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="72x72" href="/static/apple-touch-icon-72x72.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="114,114" href="/static/apple-touch-icon-114x114.png"&gt;
  &lt;link rel="stylesheet" href="/styles.css" /&gt;
  
  
  &lt;link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,900&amp;amp;subset=latin,latin-ext" rel="stylesheet" type="text/css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;" onclick="removeModal()" class="aww"&gt;
   &lt;div id="message"&gt;&lt;/div&gt;
  
  &lt;canvas id="wbCanvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;script src="/main.js"&gt;&lt;/script&gt;
  &lt;script src="/api.js"&gt;&lt;/script&gt;
  &lt;script src="/draw.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>receiver.html and iwb-receiver.js</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var socket, ctx;
  
  window.onload = function() {;
    socket = io.connect();
    ctx = document.getElementById("wbCanvas").getContext("2d");
  
    socket.on("get-iwb-message", updateWhiteboard);
  }
  
  function updateWhiteboard(data) {
    ctx.strokeStyle = data.color;
    ctx.lineTo(data.x, data.y);
    ctx.stroke();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;A web whiteboard&lt;/title&gt;
  &lt;meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"&gt;&lt;meta charset="utf-8"&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="a.css"&gt;
      &lt;style type="text/css"&gt;
        #pizarra { position: relative; }
      &lt;/style&gt;
  
      &lt;script src="https://cdn.socket.io/socket.io-1.3.2.js"&gt;&lt;/script&gt;
      &lt;script src="iwb/iwb-receiver.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;link rel="icon" type="image/png" href="/static/favicon.ico"&gt;
  &lt;link rel="apple-touch-icon" href="/static/apple-touch-icon-57x57.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="72x72" href="/static/apple-touch-icon-72x72.png"&gt;
  &lt;link rel="apple-touch-icon" sizes="114,114" href="/static/apple-touch-icon-114x114.png"&gt;
  &lt;link rel="stylesheet" href="/styles.css" /&gt;
  
  
  &lt;link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,900&amp;amp;subset=latin,latin-ext" rel="stylesheet" type="text/css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;" onclick="removeModal()" class="aww"&gt;
  &lt;canvas id="wbCanvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;script src="/main.js"&gt;&lt;/script&gt;
  &lt;script src="/api.js"&gt;&lt;/script&gt;
  &lt;script src="/draw.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;&lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>iwb-socket.js</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// socket events for interactive whiteboard
  
  function bind(socket) {
    socket.on('iwb-message', function (data) {
        //console.log("the color was: " + data.color);
        //socket.emit('get-iwb-message', { x: data.x, y: data.y, color: data.color } );
        socket.broadcast.emit('get-iwb-message', { x: data.x, y: data.y, color: data.color } );
    });
  }
  
  exports.bind = bind;</code></pre>
  </div>
  </div>
  </p>