ThePlaceHolders/static/canvas.js

125 lines
3.4 KiB
JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const CANVAS_SIZE = 500;
const DATA_SIZE = 200;
let scale = 1;
let offx = 0;
let offy = 0;
let clickx = 0;
let clicky = 0;
let mouseClicked = false;
// Array of [red, blue, green, transparency] * width * height
let image = new ImageData(DATA_SIZE, DATA_SIZE);
// Drawable image
let bitmap = null;
window.addEventListener("load", async (e) => {
for (let x = 0; x < DATA_SIZE * DATA_SIZE * 4; x++) {
image.data[x] = 255;
}
ctx.imageSmoothingEnabled = false;
// Create drawable image, update it every half second
await redraw();
setInterval(redraw, 500);
setInterval(draw, 500);
});
async function redraw() {
bitmap = await createImageBitmap(image);
}
// Color is an array of four numbers 0-255 (RGB + transparency)
function setPixel(data, x, y, color) {
let start = (y * DATA_SIZE + x) * 4;
for (let i = 0; i < 4; i++) {
data[start + i] = color[i];
}
}
function draw() {
ctx.fillStyle = "rgb(0 0 0 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
let drawScale = CANVAS_SIZE / DATA_SIZE * scale;
ctx.scale(drawScale, drawScale);
ctx.drawImage(bitmap, offx, offy);
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
function mousePosition(e) {
let x = e.clientX - canvas.getBoundingClientRect().left;
let y = e.clientY - canvas.getBoundingClientRect().top;
let cx = Math.round(x / (CANVAS_SIZE * scale) * DATA_SIZE - offx - 0.5);
let cy = Math.round(y / (CANVAS_SIZE * scale) * DATA_SIZE - offy - 0.5);
return {x: cx, y: cy};
}
function moveOffset(x, y) {
offx = Math.min(Math.max(x, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10);
}
canvas.addEventListener("wheel", async (e) => {
let mouse = mousePosition(e);
let oldScale = scale;
if (e.deltaY < 0) {
scale += 0.1;
} else if (e.deltaY > 0) {
scale -= 0.1;
}
scale = Math.min(Math.max(scale, 0.5), 10);
let diff = (CANVAS_SIZE / oldScale) - (CANVAS_SIZE / scale);
let ratiox = (mouse.x - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
let ratioy = (mouse.y - (CANVAS_SIZE / 2)) / CANVAS_SIZE;
moveOffset(diff * ratiox, diff* ratioy);
draw(image);
});
canvas.addEventListener("contextmenu", (e) => {
e.preventDefault();
})
canvas.addEventListener("mousedown", async (e) => {
// Left click
if (e.button == 0) {
mouseClicked = true;
setTimeout(() => {
mouseClicked = false;
}, 200);
}
});
canvas.addEventListener("mouseup", async (e) => {
if (e.button == 0 && mouseClicked) {
mouseClicked = false;
clickx = e.clientX;
clicky = e.clientY;
let mouse = mousePosition(e);
let cx = mouse.x;
let cy = mouse.y;
if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) {
return;
}
setPixel(image.data, cx, cy, [255, 0, 0, 255]);
await redraw();
draw();
}
});
canvas.addEventListener("mousemove", async (e) => {
// `buttons` is a bitflag for some dumb reason
if (e.buttons & 1) {
offx += e.movementX * (1.0 / scale) * 0.45;
offy += e.movementY * (1.0 / scale) * 0.45;
moveOffset(
offx + e.movementX * (1.0 / scale) * 0.45,
offy + e.movementY * (1.0 / scale) * 0.45
);
draw(image);
}
});