CoDoodler

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.

Collaboration

Author:

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-subscribe

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().

pubnub.publish({
    channel: channel,
    message: { 
        plots: plots // your array goes here
    } 
});

pubnub.subscribe({
    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.

pubnub.subscribe({
  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 realtime access to a history for all messages published to PubNub.

pubnub.history({
  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

MouseSpeak

MouseSpeak

Let your mouse do the talking by transmitting your movements and text...

Learn more
Babel

Babel

This message will self-destruct in five seconds. Babel is an open source...

Learn more
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