title: Drawing an image which is sent from client socket using javascript
body: <p>I am trying to build a service which client can send an image to server and view on website. For now, I had succeed to  send image from client via socket. Following is the snippet of my client and server</p>
  
  <p><strong>client.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var fs = require('fs');
  var express = require('express');
  var io = require('socket.io-client');
  var ss = require('socket.io-stream');
   
  var client = io.connect(${myIP});
  var stream = ss.createStream();
  var filename = './image/tmp.jpg';
  
  client.on('connect', function(){
   console.log('Connect to server');
   setInterval(function(){emitpic()}, 30);});
  
  
  function emitpic(){
   fs.readFile(filename, function(err, buf){
   client.emit('profile-image', stream,{image: true, buffer: buf.toString('base64')});
   console.log('image file is initialized'); 
   });
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>server.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var express = require('express');
  var io = require('socket.io');
  var fs = require('fs');
  var app = express();
  
  app.use(express.static("."));
  app.use(bodyparser.urlencoded({extended:true}));
  
  var port = 1234;
  var server = app.listen(port, function(){
     console.log('server up:'+ port);
  });
  
  
  var sio = io(server);
  
  sio.on('connection', function(socket){
   console.log("got one client");
      socket.on('profile-image', function(stream, data){
      
        if(data.image){
          
         var url = 'data:image/jpeg;base64,' + data.buffer;     
  
         socket.emit.broadcast('liveCamm', 'data:image/jpeg;base64,' + data.buffer ,function(err, msg){
     console.log(err);
         console.log(msg);
         });
         
        }
     });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Well, every thing look great between client and server, but the problem is that I want to draw the image on the canvas. Following is my html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;streaming&lt;/h1&gt;
  
  &lt;canvas name = "myCanvas" id="myCanvas" width="200" height="100" style="border:1px solid #000000;"&gt;
  &lt;/canvas&gt;&lt;br&gt;
  
  
  &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  var socket = io();
  
  socket.on('liveCam', function(url) {
   console.log('connected');
    var ctx = document.getElementById('myCanvas').getContext('2d');
   var img = new Image();
       img.src = url;
       ctx.drawImage(img, 10, 10);
  
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I think this part in html doesn't work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>socket.on('liveCam', function(url) {
   console.log('connected');
    var ctx = document.getElementById('myCanvas').getContext('2d');
   var img = new Image();
       img.src = url;
       ctx.drawImage(img, 10, 10);
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Does any one have any idea about what's the problem?
  Thanks for your patient.</p>