Snippets for CoDoodler Blog

01.html

<canvas id="drawCanvas" width="800" height="600"></canvas>

02.js

var canvas = document.getElementById('drawCanvas');
var ctx = canvas.getContext('2d');

ctx.lineWidth = '3';

03.js

canvas.addEventListener('mousedown', startDraw, false);
canvas.addEventListener('mousemove', draw, false);
canvas.addEventListener('mouseup', endDraw, false);

04.js

// create a flag
var isActive = false;

// array to collect coordinates
var plots = [];

function draw(e) {
  if(!isActive) return;

  // cross-browser canvas coordinates
  var x = e.offsetX || e.layerX - canvas.offsetLeft;
  var y = e.offsetY || e.layerY - canvas.offsetTop;

  plots.push({x: x, y: y});

  drawOnCanvas(plots);
}

05.js

function drawOnCanvas(color, plots) {
  ctx.beginPath();
  ctx.moveTo(plots[0].x, plots[0].y);

  for(var i=1; i<plots.length; i++) {
    ctx.lineTo(plots[i].x, plots[i].y);
  }
  ctx.stroke();
}

06.js

function startDraw(e) {
  isActive = true;
}

function endDraw(e) {
  isActive = false;

  // empty the array
  plots = [];
} 

07.html

<script src="https://cdn.pubnub.com/pubnub-3.15.2.min.js"></script>

08.js

var channel = 'my-draw-demo';

var pubnub = PUBNUB.init({
    publish_key: 'your-publish-key',
    subscribe_key: 'your-subscribe-key',
    ssl: true
});

09.js

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

10.js

pubnub.subscribe({
    channel: channel,
    callback: drawFromStream
});

11.js

function drawFromStream(message) {
    if(!message) return;        

    ctx.beginPath();
    drawOnCanvas(message.plots);
}

12.js

pubnub.subscribe({
  channel: channel,
  callback: drawFromStream,

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

h1.js

pubnub.history({
    channel: 'my-channel',
    count: 100,
    callback: function(m){ console.log(m) }
});

h2.js

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