Skip to content

Latest commit

 

History

History

diff-sync-canvas

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
app
app
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
bower.json
bower.json
 
 
gulpfile.js
gulpfile.js
 
 
package.json
package.json
 
 

README.md

Differential Synchronization - Html Canvas Example

Problem

Collaborative drawing on Html canvas

Solution

The AeroGear Sync Server an implementation of Google's Differential Synchonrization by Neil Fraser.

AeroGear.js provides a client library to interact with the server, using both the JSON Patch and Diff-Merge-Patch protocols.

This demo will utilize the JSON Patch part of the library.

Demo

demo

See the demo video on Youtube.

Working Code Example

This demo is using Fabric.js to do high level Html canvas operations. Follow the directions below to get the example working.

Prerequisites

You will need the following things properly installed on your computer.

Installation

  • Install Bower : npm install -g bower
  • Install Gulp : npm install -g gulp
  • git clone <repository-url> this repository
  • change into the new directory
  • npm install
  • bower install

Running

Start up the Sync Server (see here).

Once the Sync Server is running, do:

  • Issue gulp
  • Visit your app at http://localhost:3000. Better multiple windows so that you can see the point of the demo.

Further Reading / Useful Links

Notes

Although in the example we serialize the entire canvas every time, only the diffs are sent and received over the wire thanks to AeroGear sync. A much better implementation would not serialize the canvas every time. This demo is a showcase focused on AeroGear, not Fabric.js.