logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 10:10:39 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

added to canvas restriction

Browse source
This commit is contained in:
adanrsantos 2024-10-24 23:51:19 -05:00
parent f3de96ac54
commit 984dfaab5b
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
static/canvas.js
View file

@ -4,20 +4,26 @@ const ctx = canvas.getContext("2d");
const canvasSize = 500; const canvasSize = 500;
const dataSize = 1000; const dataSize = 1000;
const gridCount = 10; const gridCount = 10;
let zoom = 1.0;
const centerPixel = getPixelSize() / 2;
function getPixelSize() {
return canvasSize / gridCount * zoom;
}
canvas.width = canvasSize; canvas.width = canvasSize;
canvas.height = canvasSize; canvas.height = canvasSize;
//let pixelSize = canvasSize / dataSize;
let pixelSize = canvasSize / gridCount;
const centerPixel = pixelSize / 2;
function drawGrid() { function drawGrid() {
if (getPixelSize() < 5) {
return;
}
ctx.strokeStyle = '#000'; // Set grid line color ctx.strokeStyle = '#000'; // Set grid line color
ctx.lineWidth = 1; // Set grid line width ctx.lineWidth = 1; // Set grid line width
// Draw horizontal lines // Draw horizontal lines
for (let i = 0; i <= gridCount; i++) { for (let i = 0; i <= gridCount; i++) {
let y = i * pixelSize; let y = i * getPixelSize();
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(0, y); // Start the line at the left edge (x = 0) ctx.moveTo(0, y); // Start the line at the left edge (x = 0)
ctx.lineTo(canvasSize, y); // Draw to the right edge (x = canvasSize) ctx.lineTo(canvasSize, y); // Draw to the right edge (x = canvasSize)
@ -26,7 +32,7 @@ function drawGrid() {
// Draw vertical lines // Draw vertical lines
for (let i = 0; i <= gridCount; i++) { for (let i = 0; i <= gridCount; i++) {
let x = i * pixelSize; let x = i * getPixelSize();
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(x, 0); // Start the line at the top edge (y = 0) ctx.moveTo(x, 0); // Start the line at the top edge (y = 0)
ctx.lineTo(x, canvasSize); // Draw to the bottom edge (y = canvasSize) ctx.lineTo(x, canvasSize); // Draw to the bottom edge (y = canvasSize)
@ -83,7 +89,7 @@ class Point {
function draw(point) { function draw(point) {
point = point.canvasToData().dataToCanvas() point = point.canvasToData().dataToCanvas()
ctx.fillRect(point.x, point.y, pixelSize, pixelSize); ctx.fillRect(point.x, point.y, getPixelSize(), getPixelSize());
} }
canvas.addEventListener("mousedown", (e) => { canvas.addEventListener("mousedown", (e) => {