I’m trying to make a pixel art animator thing where you can make pixel art but also animate it but the problem is I want the canvas to take up most of my screen with just a little bit of space below it (and it’s a square canvas so there will be a lot of space on the sides (for buttons to change the pixel size and color etc) but I just want it to take up most of the window vertically) but I ended up having to set it to like 600×600 or 800×800 pixels (for my large monitor) but that would make the data url take up a lot of space especially if I’m storing a bunch of them for an animation so is there any smaller way to store the canvas image data for each frame (without external/third party compression libraries/frameworks)?
I tried using a smaller canvas (hidden with display: none;) that whenever I drew a larger pixel (e.g. 32×32 pixels image) on the interactive canvas on screen it drew it on the respective pixel on the smaller (hidden) canvas but when I tried to get the image data from the smaller canvas and make a <img> from the smaller canvas data url and make the image bigger again it sometimes gets blurry between the pixels