128 lines
3.6 KiB
JavaScript
128 lines
3.6 KiB
JavaScript
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 = 10;
|
|
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);
|
|
}
|