candifloss/tile_pattern_gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic drawing

Browse Source
This commit is contained in:
Candifloss 2026-08-08 16:10:51 +05:30
parent fbcac3646d
commit c79c0a84b3
3 changed files with 133 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -4,3 +4,5 @@
*.sass.map *.sass.map
*.scss.map *.scss.map
test/
dprint.json

91
app.js Normal file
View File

@ -0,0 +1,91 @@
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const widthInput = document.getElementById("width");
const heightInput = document.getElementById("height");
const resizeButton = document.getElementById("resize");
const colorInput = document.getElementById("color");
const brushInput = document.getElementById("brush");
let color = colorInput.value;
let size = Number(brushInput.value);
let painting = false;
function resize() {
canvas.width = Number(widthInput.value);
canvas.height = Number(heightInput.value);
ctx.fillStyle = "#ffffff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function wrap(value, size) {
return ((value % size) + size) % size;
}
function paint(x, y) {
x = wrap(x, canvas.width);
y = wrap(y, canvas.height);
const radius = size / 2;
ctx.fillStyle = color;
for (const dx of [-canvas.width, 0, canvas.width]) {
for (const dy of [-canvas.height, 0, canvas.height]) {
ctx.beginPath();
ctx.arc(x + dx, y + dy, radius, 0, Math.PI * 2);
ctx.fill();
}
}
}
function pointerPosition(event) {
const rect = canvas.getBoundingClientRect();
return {
x: (event.clientX - rect.left) * canvas.width / rect.width,
y: (event.clientY - rect.top) * canvas.height / rect.height,
};
}
canvas.addEventListener("pointerdown", event => {
painting = true;
canvas.setPointerCapture(event.pointerId);
const { x, y } = pointerPosition(event);
paint(x, y);
});
canvas.addEventListener("pointermove", event => {
if (!painting)
return;
const { x, y } = pointerPosition(event);
paint(x, y);
});
canvas.addEventListener("pointerup", event => {
painting = false;
canvas.releasePointerCapture(event.pointerId);
});
canvas.addEventListener("pointercancel", () => {
painting = false;
});
colorInput.addEventListener("input", () => {
color = colorInput.value;
});
brushInput.addEventListener("input", () => {
if (brushInput.value < 1)
brushInput.value = 1;
size = Number(brushInput.value);
});
resizeButton.addEventListener("click", resize);
resize();

40
index.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tile Painter</title>
</head>
<body>
<div>
<label>
Width
<input id="width" type="number" value="512" min="1">
</label>
<label>
Height
<input id="height" type="number" value="512" min="1">
</label>
<button id="resize">Resize</button>
</div>
<div>
<label>
Color
<input id="color" type="color" value="#000000">
</label>
<label>
Brush
<input id="brush" type="number" min="1" value="32">
</label>
</div>
<canvas id="canvas"></canvas>
<script src="app.js"></script>
</body>
</html>