html5 - Pass image between canvas with Webrtc -

i have found similar question doesn't seem answer question. have html5 canvas , use pubnub webrtc. want pass image between canvas data here passed http://pubnub.github.io/codoodler/history.html. ideas? (please add example answer if possible)

! function() {     function a(a) {         q.publish({             channel: 'mychannel12',             message:         })     }      function b(a, b) {         h.strokestyle = a, h.beginpath(), h.moveto(b[0].x, b[0].y);         (var c = 1; c < b.length; c++) h.lineto(b[c].x, b[c].y);         h.stroke()     }      function c(a) {         !a || a.plots.length < 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 << 0,                 y: d << 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"),         = 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() {         = 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 > 1 && (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 && q.history({         channel: 'mychannel12',         count: 50,         callback: function(a) {             q.each(a[0], c)         }     });     var r = !1,         s = [] }(); 

you can publish/subscribe canvas coordinates data in (x, y), code sample, or pass url/path of image, not image itself.

the size of each data can publish using pubnub apis <32k, passing images directly using pubnub not ideal way, if convert canvas image base64 canvas.todataurl. still large.

you want send canvas images data elsewhere, parse, , pass url.