Would it meet your needs to utilize the getDataURL() function from the Canvas API and then transmit either a base64 encoded image or a rendered DOM element?

On the client side:

To acquire base64-encoded data from your canvas, you can use HTMLCanvasElement.toDataURL. This will generate a String starting with data:image/png;base64..., similar to what is shown in your code snippet.

After obtaining the string, you have the option to send it directly to the server as a String or render it into an Image element:

var image = new Image(width, height);
image.src = myBase64String;

image.addEventListener('load', function () { /* NOTE On image loaded */ });

If you intend to send a rendered DOM Element to the server, the Element.outerHTML property can be very helpful - this property will provide an exact string representation of the element (e.g.,

"<img src="data:image/png;base64..." width="256" height="256" />"

).

On the server side:

In both scenarios, you can simply transfer the data to other clients through their sockets.

On the other clients' side:

If you are transmitting a simple base64 encoded string, it can be easily displayed using an Image element:

var image = new Image(256, 256);
image.src = receivedBase64String;

image.addEventListener('load', function () { 
  document.appendChild(image);
});

If you are sending an already rendered element, you can insert it into the DOM structure using document.createElement:

var image = document.createElement('div'); // NOTE Create a 'host' element
image.innerHTML = receivedRenderedElementString;

document.appendChild(image);

Example:

Please refer to the provided code below for a functional example.

Client side:

<title>
  Canvas Sample
</title>
<p>
  <canvas id="sample-canvas" width="256" height="256"></canvas>
</p>
<p>
  <button id="send-canvas">
    Send canvas
  </button>
  <label for="send-as-div">
    <input type="checkbox" id="send-as-div">
      Send as div
    </input>
  </label>
</p>
<p id="output-console"></p>

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
  // NOTE Simple IO console element for socket communication
  let outputConsole = document.querySelector('#output-console');
  let printToConsole = (text = '') => {
    outputConsole.innerHTML += text + '<br/>';
  };
  let renderToConsole = (element) => {
    outputConsole.appendChild(element);
    outputConsole.innerHTML += '<br/>';
  };

  // NOTE Load image (random cat image)
  let image = new Image(250, 250);
  image.src = 'http://thecatapi.com/api/images/get?format=src&size=small';
  printToConsole('Image loading.');

  // NOTE Setup canvas
  // Render the cat image when it is loaded.
  let canvas = document.querySelector('#sample-canvas');
  let context = canvas.getContext('2d');

  image.addEventListener('load', () => {
    context.drawImage(image, 0, 0);
    printToConsole('Image loaded.');
  });

  image.addEventListener('error', (error) => {
    printToConsole('Image error.' + JSON.strinfify(error));
  });

  // NOTE Setup a websocket
  // Socket will allow to send 'img' message with either a base64 encoded
  // image data, or a rendered HTML Image element.
  let socket = io('ws://localhost:8080/');

  socket.on('error', (error) => {
    printToConsole('Socket error.' + JSON.stringify(error));
  });

  socket.on('img', (image) => {
    let renderedImage = null;

    if (image.indexOf('data:image/') === 0) {

      // NOTE If we receive a base64 image, we render it as an Image
      renderedImage = new Image(250, 250);
      renderedImage.src = image;
    } else {

      // NOTE If we receive a rendered <img> element, we render it directly
      // via document.createElement
      renderedImage = document.createElement('div');
      renderedImage.innerHTML = image;
    }

    printToConsole('Received image.');
    renderToConsole(renderedImage);
  });

  // NOTE Setup button
  let sendButton = document.querySelector('#send-canvas');

  sendButton.addEventListener('click', () => {
    let encodedCanvas = canvas.toDataURL();
    let sendAsDiv = document.querySelector('#send-as-div').checked;
    let payload = null;

    if (sendAsDiv) {
      let imageElement = new Image(250, 250);
      imageElement.src = encodedCanvas;

      payload = imageElement.outerHTML;
    } else {
      payload = encodedCanvas;
    }

    socket.emit('img', payload);

    printToConsole('Image sent.');
  });
</script>

Server side (requires npm install -D express socket.io):

'use strict';

let express = require('express');
let http = require('http');
let socketIo = require('socket.io');

// NOTE Setup server
let httpServer = http.createServer(express());
let socketServer = socketIo(httpServer);
let sockets = [];
let port = 8080;

httpServer.listen(port);

// NOTE Setup socket listener

socketServer.on('connection', (socket) => {
  sockets.push(socket);

  let socketId = sockets.length;

  socket.on('img', (payload) => {
    socket.broadcast.emit('img', payload);
  });
});

Let me know if that resolves your query 🙂