This is extremely inefficient and whatever your end goal is can almost certainly be achieved some other way. If you really want a grid with 1x1 pixel size cells, you can just specify that in the grid template. Note that this will only work properly if there are no borders, margins, padding, or gap.
#How can I create a CSS grid that aligns with 1x1 pixel canvas rendering?
terse anchor
restive venture
Why is it ineffcient?
the grid or my canvas
sorry for not specifying, but the style is for a div:
<div id="grid"></div>
restive venture
This is extremely inefficient and whatever your end goal is can almost certainly...
(i just want to ping you since @ doesnt work)
terse anchor
the grid or my canvas
The grid is inefficient, because each item you put in has to be an element. Elements require far more memory than pixels, and they become part of the DOM, which has to be iterated for rendering and updates.
Also, it's completely redundant. You can set individual pixels in the canvas.
restive venture
The grid is inefficient, because each item you put in has to be an element. Elem...
They arent elements, i just have canvas and a div with the style that i send previously
terse anchor
Or if you want event listeners, you can set one on the whole canvas and check coordinates if it's for mouse activity.
terse anchor
They arent elements, i just have canvas and a div with the style that i send pre...
Are you referring to CSS grid, or just a grid pattern?
I thought it was CSS grid. That holds elements.
restive venture
this.
no, its a empty div
with the #grid style, thats what i was trying to tell you
terse anchor
no, its a empty div
Empty divs are elements. If you intend to have thousands of empty divs, it is far less efficient than thousands of pixels. It could be so bad that the browser may become unresponsive.
restive venture
what
terse anchor
with the #grid style, thats what i was trying to tell you
You mean it's not a CSS grid and you just want the visual appearance of a grid?
restive venture
its just one, here let me send a snippet:
<div id="canvasDiv">
<canvas style="flex: 1" class="canvas" id="canvas"></canvas>
<div id="grid"></div>
</div>
restive venture
You mean it's not a CSS grid and you just want the visual appearance of a grid?
YES, exactly
terse anchor
YES, exactly
OK. That can be efficient, but what size are the boxes? 1px each?
restive venture
they should be since im drawing them with this code:
this.context.fillRect(x, y, 1, 1);
That is JS canvas and not CSS at all.
restive venture
however, it doesnt fit when i set grid-size to 1px:
restive venture
That is JS canvas and not CSS at all.
I know, the grid and the the canvas are sepearte things, i just want a grid overlay on top of the canvas
terse anchor
however, it doesnt fit when i set grid-size to 1px:
I mentioned earlier that it won't work with borders, margins, or padding.
restive venture
Are you trying to tell me that I can't create an overlay grid?
what does that mean?
restive venture
I mentioned earlier that it won't work with borders, margins, or padding.
?
terse anchor
Are you trying to tell me that I can't create an overlay grid?
Borders take space and cannot be narrower than 1px. It is possible to have a visible grid if the size is substantially larger than 1px per cell, but at 1px, the border is the size of a cell and will cover half of all the cells.
I mentioned margins and padding because they also take space.
restive venture
setting the grid strenght/thickness to 0.1px makes it thinner tho
terse anchor
setting the grid strenght/thickness to 0.1px makes it thinner tho
This is not safe. The lines may become invisible depending on the monitor and zoom level.
restive venture
oh okay
terse anchor
But if you want to do that, you still need to do math to account fo the thickness of the borders. Otherwise, everything will be out of alignment.
restive venture
yes, that is my issue, can you help me with that
restive venture
But if you want to do that, you still need to do math to account fo the thicknes...
I tried to copy what the team in this repo did, however, I failed, maybe it helps:
terse anchor
I still don't know why you need a CSS overlay. If you already drew something with the canvas, you can draw the lines too.
restive venture
I still don't know why you need a CSS overlay. If you already drew something wit...
no, that will cause bugs/glitches and i just dont think thats the right way to do it, an overlay is perfectly suited for the job
restive venture
I still don't know why you need a CSS overlay. If you already drew something wit...
So, can you please help me?
terse anchor
no, that will cause bugs/glitches and i just dont think thats the right way to d...
There must be something fundamentally wrong in what you tried if this causes bugs and glitches. The grid must be drawn last. If it is last in the draw order, it cannot interfere with anything else. It will simply go on top. Also, you must redraw when there is an update.
restive venture
There must be something fundamentally wrong in what you tried if this causes bug...
No, im just familiar with canvas and thin lines, plus I will need to redraw which is slower than an overlay that just stays consistent
terse anchor
In most web based games, the entire canvas is completely erased and redrawn 60 times per second. Being slower is not a problem.