HTML and CSS Reference
In-Depth Information
You need to create a public/js/ subdirectory underneath public/ that contains the three dependencies
listed earlier: jquery.min.js , underscore.js , and quintus.js . You can pull these from the chapter
Notice one special script tag at the end:
<script src="/"></script>
This is a path created by that provides a number of conveniences. First, it sets the default WebSock-
et path and server to match the requested file to make connecting easier and prevent any issues determining
the correct address between development and production environments. It also automatically determines which
transport mechanism to use: straight WebSockets or one of the fallbacks.
Next, create the scribble.js file mentioned in Listing 21-4 in the public/ directory. Add the code in Listing
21-5 .
Listing 21-5: scribble.js
$(function() {
var Q = Quintus().setup('quintus', { maximize: true }),
socket = io.connect(),
start = {},
move = {};
function getTouch(e) {
var touch = e.originalEvent.changedTouches ?
e.originalEvent.changedTouches[0] : e,
canvasPos = Q.el.offset(),
canvasX = (touch.pageX - canvasPos.left) / Q.el.width() *
canvasY = (touch.pageY - / Q.el.height() *
return { x: canvasX, y: canvasY };
function drawLine(from,to) {
Q.ctx.strokeStyle= "#000";
Q.el.on('touchstart mousedown',function(e) {
start = getTouch(e);
Q.el.on('touchmove mousemove',function(e) {
if(!start.x) return;
Search WWH ::

Custom Search