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

Compare commits

base: logan:dfc07022285f1f9bd45b1b3f0056aafdf0905f56
Branches Tags
logan:main
..
compare: logan:ab5c4342c8f045cfe02eb4f90158934bbc8bfd98
Branches Tags
logan:main

No commits in common. "dfc07022285f1f9bd45b1b3f0056aafdf0905f56" and "ab5c4342c8f045cfe02eb4f90158934bbc8bfd98" have entirely different histories.
dfc0702228 ... ab5c4342c8

1 changed files with 8 additions and 14 deletions
Show stats Expand all files Collapse all files

20
static/canvas.js
View file

@ -4,26 +4,20 @@ 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 * getPixelSize(); let y = i * pixelSize;
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)
@ -32,7 +26,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 * getPixelSize(); let x = i * pixelSize;
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)
@ -89,7 +83,7 @@ class Point {
function draw(point) { function draw(point) {
point = point.canvasToData().dataToCanvas() point = point.canvasToData().dataToCanvas()
ctx.fillRect(point.x, point.y, getPixelSize(), getPixelSize()); ctx.fillRect(point.x, point.y, pixelSize, pixelSize);
} }
canvas.addEventListener("mousedown", (e) => { canvas.addEventListener("mousedown", (e) => {