title: Using raphael.js to draw an image with parameters sent through socket.io
body: <p>This is what I have tried so far.</p>
  
  <p><code>socket-server.js</code></p>
  
  <pre><code>var app = require('express')();
  var http = require('http').Server(app);
  var io = require('socket.io')(http);
  var config = require('./config2.js');
  
  app.get('/', function(req, res){
    res.sendfile('socket-client.html');
  });
  io.on("connection", function (socket) {
      var mapRes = {width : 720, height: 1040};
      socket.emit("mapRes", mapRes);
  });
  http.listen(3000, function(){
    console.log('listening on *:3000');
  });
  </code></pre>
  
  <p>Relevent scripts from <code>socket-client.html</code></p>
  
  <pre><code>var socket = io();
  window.onload = function() {
      var paper = new Raphael(document.getElementById('canvas'), canvas_width, canvas_height);
      socket.on('mapRes', function(message){
      var mapRes = message;
      var mapImg = paper.image("http://localhost/home/username/Desktop/map.png",0,0,mapRes.width,mapRes.height);
      });
  }
  </code></pre>
  
  <p>Here, "canvas" just an id of the  tag where the image is supposed to be loaded</p>
  
  <p>Although the console showed <code>GET http://localhost/home/username/Desktop/map.png [0ms]</code>, the image is not loaded.
  both the image and the codes (<code>socket-server.js</code> &amp; <code>socket-client.html</code>) are in the same folder as the <code>map.png</code>.The complete path to folder is <code>/home/username/Desktop</code>. Can someone enlighten me on where I got it wrong?</p>