script.js

const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth - 700;
canvas.height = 700;

let context = canvas.getContext("2d");
let startBackgroundColor = "white";
context.fillStyle = startBackgroundColor;
context.fillRect(0, 0, canvas.width, canvas.height);

let draw_color = "black";
let draw_width = "2";
let is_drawing = false;

let Restore_array = [];
let index = -1;

let drawData = {
    x: '',
    y: '',
    color: ''
};

function change_color(element)
{
    draw_color = element.style.backgroundColor;
}

function clear_canvas()
{
    context.fillStyle = startBackgroundColor;
    context.clearRect(0,0,canvas.width,canvas.height);
    context.fillRect(0,0,canvas.width,canvas.height);
    Restore_array = [];
    index = -1;
}

function undo()
{
    if(index<=0)
    {
        clear_canvas();
    }
    else
    {
        index--;
        Restore_array.pop();
        context.putImageData(Restore_array[index], 0, 0); // undo
    }
}

canvas.addEventListener("touchstart", start, false); // touchstart i touchmove pozwala na rysowanie na telefonie itp
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("mousedown", start, false);
canvas.addEventListener("mousemove", draw, false);

canvas.addEventListener("touchend", stop, false);
canvas.addEventListener("mouseup", stop, false);
canvas.addEventListener("mouseout", stop, false);

socket.on('getPaint', function(drawData){
    context.beginPath();
    context.lineTo(drawData.x - canvas.offsetLeft, drawData.y - canvas.offsetTop);
    context.strokeStyle = drawData.color;
    context.lineWidth = draw_width;
    context.lineCap = "round";
    context.lineJoin = "round";
    context.stroke();
    console.log(drawData);
});

function start(event)
{
    is_drawing = true;
    context.beginPath();
    context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
    console.log('moveTo',event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
    event.preventDefault();
}

function draw(event)
{
    if(is_drawing)
    {
        context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
        console.log('lineTo',event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
        context.strokeStyle = draw_color;
        context.lineWidth = draw_width;
        context.lineCap = "round";
        context.lineJoin = "round";
        context.stroke();
        //console.log(event.clientX, ' ', event.clientY);

        drawData.x = event.clientX;
        drawData.y = event.clientY;
        drawData.color = draw_color;
        socket.emit('drawing',drawData);
    }
}

function stop(event)
{
    if(is_drawing)
    {
        context.stroke();
        context.closePath();
        is_drawing = false;
    }
    event.preventDefault();

    if(event.type != 'mouseout')
    {
        Restore_array.push(context.getImageData(0,0,canvas.width,canvas.height)) // każde zastopowanie dodaje narysowany element do tablicy
        index++;
    }
}