Collaborative Whiteboard with HTML5 Canvas and History

2 min readPubNub Staff on Sep 16, 2014
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

We'll build off our previous multi-user collaborative HTML5 canvas whiteboard and add history so previous drawings are stored, even after refresh.

Multi-User HTML5 CanvasIn my last tutorial, Doodle with Strangers! Multi-User HTML5 Canvas in 4 Steps you have learned how to create a very simple doodling web app that allows multiple users draw on the canvas at the same time, using PubNub real-time JavaScript API.

In this tutorial, we’ll build off the previous example and add history (also know as Storage & Playback), so our previous doodles are saved and displayed when the page is reloaded.

If you want to check out the new demo with Storage & Playback implemented, take a look at our HTML5 canvas with History demo here. You can compare it with our first HTML5 canvas demo here.

You’ll notice clear difference, besides the background color- in the new demo, you see previously drawn canvas, while the previous demo starts with a brand-new canvas.

Doodle with Strangers! Multi-User HTML5 Canvas

Fetching Old Data using History (Storage & Playback) API

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:

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.

To simply retrieve last 100 messages, this is all you need to do:

The history() returns a list of up to 100 messages, the start time token and the ending time token. The response from history() looks like:

[['message1', 'message2', 'message3',... ],'Start Time Token', 'End Time Token']

HTML5 Canvas: Blast from The Past

Let’s add this feature to your canvas app. With the API, make the app to automatically display the 50 previously drawn strokes on canvas. Before you start, you need to enable the feature on your admin dashboard (this is why you’ll first need to sign up for a PubNub account).

Once you call the history function, at the success call back, call the function drawFromStream, created at the previous HTML5 canvas tutorial.

Boom. Now, at the initial load, you get old drawings from strangers! If you would like, the entire HTML5 canvas source code of the demo is on GitHub.

Get Started
Sign up for free and use PubNub to power
your HTML5 canvas collaborative whiteboard!

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff