title: Pass image between canvas with Webrtc
body: <p>I have found a similar question but it doesn't seem to answer my question. I have an HTML5 canvas and i use pubnub with webrtc. What i want to do is to pass my image between the canvas like the data from here are passed <a href="http://pubnub.github.io/codoodler/history.html" rel="nofollow">http://pubnub.github.io/codoodler/history.html</a>. Any ideas? (Please add an example to the answer if possible)</p>
  
  <pre><code>! function() {
      function a(a) {
          q.publish({
              channel: 'mychannel12',
              message: a
          })
      }
  
      function b(a, b) {
          h.strokeStyle = a, h.beginPath(), h.moveTo(b[0].x, b[0].y);
          for (var c = 1; c &lt; b.length; c++) h.lineTo(b[c].x, b[c].y);
          h.stroke()
      }
  
      function c(a) {
          !a || a.plots.length &lt; 1 || b(a.color, a.plots)
      }
  
      function d(a) {
          if (a.preventDefault(), r) {
              var c = j ? a.targetTouches[0].pageX - g.offsetLeft : a.offsetX || a.layerX - g.offsetLeft,
                  d = j ? a.targetTouches[0].pageY - g.offsetTop : a.offsetY || a.layerY - g.offsetTop;
              s.push({
                  x: c &lt;&lt; 0,
                  y: d &lt;&lt; 0
              }), b(i, s)
          }
      }
  
      function e(a) {
          a.preventDefault(), r = !0
      }
  
      function f(b) {
          b.preventDefault(), r = !1, a({
              color: i,
              plots: s
          }), s = []
      }
      var g = document.getElementById("drawCanvas"),
          h = g.getContext("2d"),
          i = document.querySelector(":checked").getAttribute("data-color");
      g.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300), g.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300), h.strokeStyle = i, h.lineWidth = "3", h.lineCap = h.lineJoin = "round", document.getElementById("colorSwatch").addEventListener("click", function() {
          i = document.querySelector(":checked").getAttribute("data-color")
      }, !1);
      var j = "ontouchstart" in window,
          k = navigator.pointerEnabled,
          l = navigator.msPointerEnabled,
          m = j ? "touchstart" : k ? "pointerdown" : l ? "MSPointerDown" : "mousedown",
          n = j ? "touchmove" : k ? "pointermove" : l ? "MSPointerMove" : "mousemove",
          o = j ? "touchend" : k ? "pointerup" : l ? "MSPointerUp" : "mouseup";
      g.addEventListener(m, e, !1), g.addEventListener(n, d, !1), g.addEventListener(o, f, !1);
      var p = "draw",
          q = PUBNUB.init({
              publish_key: "pub-c-465c4b3b-0b7d-40de-86c5-10a9433058b5",
              subscribe_key: "sub-c-43a257e0-d94a-11e4-a2b8-0619f8945a4f",
              leave_on_unload: !0
          });
      q.subscribe({
          channel: 'mychannel12',
          callback: c,
          presence: function(a) {
              a.occupancy &gt; 1 &amp;&amp; (document.getElementById("unit").textContent = "doodlers"), document.getElementById("occupancy").textContent = a.occupancy;
              var b = document.getElementById("occupancy").parentNode;
              b.classList.add("anim"), b.addEventListener("transitionend", function() {
                  b.classList.remove("anim")
              }, !1)
          }
      }), drawHistory &amp;&amp; q.history({
          channel: 'mychannel12',
          count: 50,
          callback: function(a) {
              q.each(a[0], c)
          }
      });
      var r = !1,
          s = []
  }();
  </code></pre>