45 lines
1014 B
JavaScript
45 lines
1014 B
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
(function() {
|
||
|
|
|
||
|
|
var socket = io();
|
||
|
|
var canvas = document.getElementsByClassName('display')[0];
|
||
|
|
var context = canvas.getContext('2d');
|
||
|
|
|
||
|
|
socket.on('draw', onDraw);
|
||
|
|
|
||
|
|
window.addEventListener('resize', onResize, false);
|
||
|
|
onResize();
|
||
|
|
|
||
|
|
|
||
|
|
function drawLine(x0, y0, x1, y1, color){
|
||
|
|
context.beginPath();
|
||
|
|
context.moveTo(x0, y0);
|
||
|
|
context.lineTo(x1, y1);
|
||
|
|
context.strokeStyle = color;
|
||
|
|
context.lineWidth = 2;
|
||
|
|
context.stroke();
|
||
|
|
context.closePath();
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawPixel(x, y, color){
|
||
|
|
context.fillStyle = '#' + color;
|
||
|
|
context.fillRect(x - (canvas.width * 0.005),y - (canvas.height * 0.005), canvas.width * 0.01, canvas.height * 0.01);
|
||
|
|
}
|
||
|
|
|
||
|
|
function onDraw(data){
|
||
|
|
var w = canvas.width;
|
||
|
|
var h = canvas.height;
|
||
|
|
if (data.type == 'pixel') {
|
||
|
|
drawPixel(data.x * w, data.y * h, data.color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// make the canvas fill its parent
|
||
|
|
function onResize() {
|
||
|
|
canvas.width = window.innerWidth;
|
||
|
|
canvas.height = window.innerHeight;
|
||
|
|
}
|
||
|
|
|
||
|
|
})();
|