canvas-lock.js

// when someone draws on the canvas, all the other connected people on the site can't draw, 
// unless the timeout is reached or the user who is drawing quits or refresh the page.

// let's say myCanvas is the current html canvas
var myCanvas = .......

// timer
var timer = null;

// this is current user
var currentUser = ......

// listen for event draw
// supposing "draw" is the event name got fired when user starts drawing
myCanvas.on("draw", () => {

   if((this.locked && (this.locker !== currentUser)) return;
   
   if(this.locker !== currentUser) this.locker = currentUser;

   // protect the canvas 
   if(!this.locked) this.locked = true;
   
   // set timer
   if(!timer) {
     timer = setTimeout(() => { 
     alert("Time is up, now get out");
     this.locked = false;
     }, 3000);
   }
   
   // work with user drawing.......
   
});

// listen for event window unload when user closes tab or refresh browser
window.onbeforeunload = (e) => {
  // isDirty() is to check if the drawing was already started
  // implement it if not yet exist
  if(myCanvas.locked && myCanvas.isDirty()) {
     var message = "Are you sure you want leave?";
     e.returnValue = message;
     if(timer) clearTimeout(timer);
     return message;
  }
  return;
};