diff --git a/.gitignore b/.gitignore
index 83761df..d85480c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,5 @@
*.sass.map
*.scss.map
+test/
+dprint.json
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..627cc88
--- /dev/null
+++ b/app.js
@@ -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();
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ab7c251
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+
+ Tile Painter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file