webs/pain/main.js

const button = document.getElementById("button");
const canvas = document.getElementById("canvas");
const title = document.getElementById("title");
const head = document.getElementById("head");
const colorele = document.getElementById("colorele");
const rangele = document.getElementById("rangele");
const save = document.getElementById("save");
const ctx = canvas.getContext("2d");
let power = 1920 / canvas.clientWidth;
let isDrawing = false;
let x = 0;
let y = 0;
let t =false;
let color = "#000000";
let bold = 50;
let image = new Image();

canvas.width = 1920;
canvas.height = 1080;
image.src = "the pain.jpg";
image.onload = () => {
    pain();
}

const start =e => {
    if(e.type=="mousedown"){
        x = e.offsetX * power;
        y = e.offsetY * power;
    }else{
        x = fixPosX(e.touches[0].pageX);
        y = fixPosY(e.touches[0].pageY);
    }
    isDrawing = true;
  };
const move =  e => {
    if (isDrawing === true) {
        if(e.type=="mousemove"){
            drawLine(ctx, x, y, e.offsetX * power, e.offsetY * power);
            x = e.offsetX * power;
            y = e.offsetY * power;
        }else{
            e.preventDefault();
            drawLine(ctx, x, y, fixPosX(e.touches[0].pageX), fixPosY(e.touches[0].pageY));
            x = fixPosX(e.touches[0].pageX);
            y = fixPosY(e.touches[0].pageY);
        }    
    }
  };
const end = e => {
    if (isDrawing === true) {
        if(e.type=="mouseup"){
            drawLine(ctx, x, y, e.offsetX * power, e.offsetY * power);
        }
      x = 0;
      y = 0;
      isDrawing = false;
    }
  };

colorele.addEventListener('change', e => {
    color = e.target.value;
});

rangele.addEventListener('change', e => {
    bold = e.target.value;
});

save.addEventListener("click",()=>{
    let element = document.createElement('a');
    element.href = canvas.toDataURL('image/png');
    element.download = title.innerText + '.png';
    element.target = '_blank';
    element.click();
});

button.addEventListener('click',()=>{
    if(!t){
        canvas.addEventListener('mousedown', start);
        canvas.addEventListener('touchstart', start);
        canvas.addEventListener('mousemove', move);
        canvas.addEventListener('touchmove', move);
        window.addEventListener('mouseup', end);
        window.addEventListener('touchend', end);
        window.addEventListener('touchcancel', end);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        title.innerText = "Paint";
        head.innerText = "This is a PAINT TOOL";
        t = true;
    }else{
        canvas.removeEventListener('mousedown', start);
        canvas.removeEventListener('touchstart', start);
        canvas.removeEventListener('mousemove', move);
        canvas.removeEventListener('touchmove', move);
        window.removeEventListener('mouseup', end);
        window.removeEventListener('touchend', end);
        window.removeEventListener('touchcancel', end);
        pain();
        title.innerText = "Pain"
        head.innerText = "This is a PAIN TOOL"
        t = false;
    }
} );

  window.onresize = () =>{
    power = 1920 / canvas.clientWidth;
  };
  
function drawLine(context, x1, y1, x2, y2) {
    context.beginPath();
    context.strokeStyle = color;
    context.lineWidth = bold;
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
    context.closePath();
}
  
function fixPosX(posX){
    const bcr = canvas.getBoundingClientRect();
    return (posX - bcr.left - window.pageXOffset) * power;
}
function fixPosY(posY){
    const bcr = canvas.getBoundingClientRect();
    return (posY - bcr.top - window.pageYOffset) * power;
}
function pain(){
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}