Doodle with strangers on InterWeb! This is a very simple multi-user doodling web app, using PubNub real-time network JavaScript API, that enable you to draw on the canvas with strangers.



Tomomi Imura

Github DownloadTutorial

Collaborative HTML5 Canvas Made Easy

With PubNub's data streaming, you can display all users' drawing paths by simply sending and receiving canvas coordinates to PubNub data stream.


Publish and Subscribe Draw Paths

Build your drawing web app by simply:

  • Creating a drawing canvas that allows a user to draw, with HTML5 Canvas

  • Publishing the drawing path data to PubNub data stream

  • Subscribing the data from other users from the data stream, and draw on the canvas

To send data, all you have to do is broadcast the array of canvas coordinates to a channel with publish(). To retrieve the published data, you simply need subscribe().

    channel: channel,
    message: { 
        plots: plots // your array goes here

    channel: channel,
    callback: drawFromStream

Displaying Occupancy

You can also display the number of users online with Presence Detection API. presence() receives user events including Join/Leave status changes.

  channel: channel,
  callback: drawFromStream,

  // Add presence
  presence: function(m){
     document.getElementById('occupancy').textContent = m.occupancy;

Fetching Old Data Using History

You can easily retrieve last drawing data using history() API. This function fetches historical messages of a channel. This Storage & Playback feature provides real-time access to a history for all messages published to PubNub.

  channel: channel, 	
  count: 50,
  callback: function(messages) {
    pubnub.each( messages[0], drawFromStream );

Blog Posts

Features Used

Feedback & Support

Need help? Contact PubNub Support.

More Demos for you

WebRTC Video Chat Signaling

WebRTC Video Chat Signaling

Let PubNub be your signal protocol service, and combine it with a hosted...

Learn more

Talk to an expert

Contact Sales