pixelnode/public/main.js

55 lines
1.3 KiB
JavaScript
Raw Normal View History

2018-04-03 12:48:19 +02:00
'use strict';
(function() {
var socket = io();
var canvas = document.getElementsByClassName('display')[0];
var context = canvas.getContext('2d');
2018-04-03 14:35:01 +02:00
var canvas_size_x = 100;
var canvas_size_y = 100;
socket.on('setting', onSetting);
2018-04-03 12:48:19 +02:00
socket.on('draw', onDraw);
window.addEventListener('resize', onResize, false);
onResize();
2018-04-03 14:35:01 +02:00
function onSetting(data) {
canvas_size_x = data.canvas.size.x;
canvas_size_y = data.canvas.size.y;
}
2018-04-03 12:48:19 +02:00
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){
2018-04-03 14:35:01 +02:00
context.fillStyle = color;
context.fillRect(x - (canvas.width * (0.5/canvas_size_x)),y - (canvas.height * (0.5/canvas_size_y)), canvas.width * (1/canvas_size_x), canvas.height * (1/canvas_size_y));
2018-04-03 12:48:19 +02:00
}
function onDraw(data){
var w = canvas.width;
var h = canvas.height;
if (data.type == 'pixel') {
2018-04-03 14:35:01 +02:00
drawPixel((data.x / canvas_size_x) * w, (data.y / canvas_size_y) * h, data.color);
2018-04-03 12:48:19 +02:00
}
}
// make the canvas fill its parent
function onResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
})();