TogetherJS Drawing Example

http://togetherjs.com/examples/drawing

by Juan Muñoz

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="https://togetherjs.com/togetherjs-min.js"></script>
<a onclick="TogetherJS(this); return false;"><img src="https://togetherjs.com/images/start-togetherjs-blue.png" style="width: 135px" /></a>

<div class="btn-group btn-group-justified" style="margin-right: auto; margin-top: 10px; width: 70%;"> 
  <a class="btn btn-info color-picker upper-button">Blue</a>          
  <a class="btn btn-success color-picker">Green</a>
  <a class="btn btn-warning color-picker">Yellow</a>
  <a class="btn btn-danger color-picker">Red</a>
  <a class="btn btn-success color-picker black-pick upper-button" style="border-bottom-width: 0px;">Black</a>
</div>
<div class="clearfix"></div>
<div id="sketchContainer" style="width: 70%; height: 300px; border: 1px solid rgba(0,0,0,0.2)"><canvas id="sketch"></canvas></div>
<div class="btn-group btn-group-justified" style="margin-right: auto; width: 70%;"> 
  <a class="btn btn-info user-color-pick bottom-button" style="width: 30%;">User Color</a>
  <a class="btn btn-success plus-size" style="width: 15%;">
    <i class="fa fa-plus-square"></i>
  </a>
  <a class="btn btn-warning clear" style="width: 15%;">
    <i class="fa fa-times-circle"></i>
  </a>
  <a class="btn btn-danger minus-size" style="width: 15%;">
    <i class="fa fa-minus-square"></i>
  </a>
  <a class="btn btn-default eraser bottom-button" style="width: 35%; border-top-width: 0px;">
    <i class="fa fa-eraser"></i>
  </a>
</div>

CSS

.upper-button {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
.bottom-button {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
.black-pick:hover {
	background-color: #000;
	border-color: #000;
}
.black-pick {
	background-color: #202020;
	border-color: #202020;
}

JavaScript

// get the canvas element and its context
var canvas = document.getElementById('sketch');
var context = canvas.getContext('2d');

// the aspect ratio is always based on 1140x400, height is calculated from width:
canvas.width = $('#sketchContainer').outerWidth();
canvas.height = (canvas.width/1140)*400;
$('#sketchContainer').outerHeight(String(canvas.height) + "px", true);
// scale function needs to know the width/height pre-resizing:
var oWidth = canvas.width;
var oHeight = canvas.height;
var lines = [];

var lastMouse = {
  x: 0,
  y: 0
};

// brush settings
context.lineWidth = 2;
context.lineJoin = 'round';
context.lineCap = 'round';
context.strokeStyle = '#000';

// attach the mousedown, mouseout, mousemove, mouseup event listeners.
canvas.addEventListener('mousedown', function (e) {
  lastMouse = {
    x: e.pageX - this.offsetLeft,
    y: e.pageY - this.offsetTop
  };
  canvas.addEventListener('mousemove', move, false);
}, false);

canvas.addEventListener('mouseout', function () {
  canvas.removeEventListener('mousemove', move, false);
}, false);

canvas.addEventListener('mouseup', function () {
  canvas.removeEventListener('mousemove', move, false);
}, false);

// Sets the brush size:
function setSize(size) {
  context.lineWidth = size;
}

// Sets the brush color:
function setColor(color) {
  context.globalCompositeOperation = 'source-over';
  context.strokeStyle = color;
}

// Sets the brush to erase-mode:
function eraser() {
  context.globalCompositeOperation = 'destination-out';
  context.strokeStyle = 'rgba(0,0,0,1)';
}

// Clears the canvas and the lines-array:
function clear(send) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  lines = [];
  if (send && TogetherJS.running) {
    TogetherJS.send({
      type: 'clear'
    });
  }
}

// Redraws the lines from the lines-array:
function reDraw(lines){
  for (var i in lines) {
    draw(lines[i][0], lines[i][1], lines[i][2], lines[i][3], lines[i][4], false);
  }
}
// Draws the lines, called by...