Vfrdtyky

let color = "";

let picker = new KellyColorPicker({place : 'picker', input : 'color', size : 200});

let ctx;

let canvas;

let isTouchSupported;

let isPointerSupported;

let isMSPointerSupported;

let isActive = false;

let plots = ;

let sliderSpan;



(function()

{

    //test

    let slider = document.getElementById("slider");

    sliderSpan = slider.getElementsByTagName("span");

    let pickerCanvas = picker.getCanvas();



    let canvasContainer = document.getElementById("container");

    canvas = document.getElementById('canvas');

    ctx = canvas.getContext('2d');

    canvas.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300);

    canvas.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300);

    canvas.style.zIndex = 19;

    canvasContainer.appendChild(pickerCanvas);

    canvasContainer.appendChild(canvas);

    ctx.strokeStyle = picker.getCurColorRgb();

    ctx.lineWidth = '3';

    ctx.lineCap = ctx.lineJoin = 'round';





    isTouchSupported = 'ontouchstart' in window;

    isPointerSupported = navigator.pointerEnabled;

    isMSPointerSupported =  navigator.msPointerEnabled;



    let downEvent = isTouchSupported ? 'touchstart' : (isPointerSupported ? 'pointerdown' : (isMSPointerSupported ? 'MSPointerDown' : 'mousedown'));

    let moveEvent = isTouchSupported ? 'touchmove' : (isPointerSupported ? 'pointermove' : (isMSPointerSupported ? 'MSPointerMove' : 'mousemove'));

    let upEvent = isTouchSupported ? 'touchend' : (isPointerSupported ? 'pointerup' : (isMSPointerSupported ? 'MSPointerUp' : 'mouseup'));



    canvas.addEventListener(downEvent, startDraw, false);

    canvas.addEventListener(moveEvent, draw, false);

    canvas.addEventListener(upEvent, endDraw, false);

})();



function drawOnCanvas(color, plots)

{

    ctx.strokeStyle = color;

    ctx.beginPath();

    ctx.moveTo(plots[0].x, plots[0].y);



    for(let i=1; i<plots.length; i++)

    {

        ctx.lineTo(plots[i].x, plots[i].y);

    }

    ctx.stroke();

}



function draw(e)

{

    e.preventDefault(); // prevent continuous touch event process e.g. scrolling!

    if(!isActive) return;



    let x = isTouchSupported ? (e.targetTouches[0].pageX - canvas.offsetLeft) : (e.offsetX || e.layerX - canvas.offsetLeft);

    let y = isTouchSupported ? (e.targetTouches[0].pageY - canvas.offsetTop) : (e.offsetY || e.layerY - canvas.offsetTop);



    plots.push({x: (x << 0), y: (y << 0)}); // round numbers for touch screens

    let packet = CreatePacket();

    packet.pushByte(dataType.drawing);

    packet.pushString(color);

    packet.pushInt(x);

    packet.pushInt(y);

    packet.pushString(OwnerId);

    packet.pushByte(drawType.drawing);

    packet.send();

    drawOnCanvas(color, plots);

}



function startDraw(e)

{

    color = picker.getCurColorHex();

    let size = parseInt(sliderSpan[0].style.left.replace('%',''));

    ctx.lineWidth = size;

    e.preventDefault();

    let x = isTouchSupported ? (e.targetTouches[0].pageX - canvas.offsetLeft) : (e.offsetX || e.layerX - canvas.offsetLeft);

    let y = isTouchSupported ? (e.targetTouches[0].pageY - canvas.offsetTop) : (e.offsetY || e.layerY - canvas.offsetTop);

    let packet = CreatePacket();

    packet.pushByte(dataType.drawing);

    packet.pushString(color);

    packet.pushInt(x);

    packet.pushInt(y);

    packet.pushString(OwnerId);

    packet.pushByte(drawType.start);

    packet.pushByte(size);

    packet.send();

    isActive = true;

}



function endDraw(e)

{

    e.preventDefault();

    isActive = false;

    plots = ;

}