Responsive Canvas | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 6

Responsive Canvas

How can I make canvas responsive?

4th Jul 2021, 5:20 AM
Smart Potato
Smart Potato - avatar
8 Answers
+ 3
Thank you everyone 🤩
4th Jul 2021, 7:32 AM
Smart Potato
Smart Potato - avatar
+ 2
that's quite tricky ;P you must resize the canvas dimensions as soon as viewport get resized and redraw its content accordingly ^^
4th Jul 2021, 5:22 AM
visph
visph - avatar
+ 2
Window.innerWidth
4th Jul 2021, 5:34 AM
Smart Doge
Smart Doge - avatar
+ 2
yes, and you should define how the redrawn is handled: roughly responsive or not... but canvas size must have dimensions (in pixel) very differents... that's why usually canvas is used with fixed dimensions ;)
4th Jul 2021, 5:34 AM
visph
visph - avatar
+ 2
Canvas.width = window.innerWidth Canvas.height = window.innerHeight
4th Jul 2021, 6:28 AM
Սոֆի Մովսեսյան
Սոֆի Մովսեսյան - avatar
+ 2
Sofi (DM❌) only if you define canvas css dimensions to fit viewport ^^ anyway, with big sized viewports, high sized canvas would be less efficient: it could be smart to have canvas size reduced related to viewport size ;P
4th Jul 2021, 6:33 AM
visph
visph - avatar
+ 2
window. onresize=function(){ canvas.height=window. inneHeight canvas.width=window.innerWidth }
4th Jul 2021, 7:13 AM
Σταυρος
Σταυρος - avatar
+ 1
visph Ohhh, that is a bit difficult 🙁
4th Jul 2021, 5:31 AM
Smart Potato
Smart Potato - avatar