Responsive Canvas

Question

How can I make canvas responsive?

Answer 1

Thank you everyone 🤩

Answer 2

that's quite tricky ;P

you must resize the canvas dimensions as soon as viewport get resized and redraw its content accordingly ^^

Answer 3

Window.innerWidth

Answer 4

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 ;)

Answer 5

Canvas.width = window.innerWidth
Canvas.height = window.innerHeight

Answer 6

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

Answer 7

window. onresize=function(){
canvas.height=window. inneHeight
canvas.width=window.innerWidth
}

Answer 8

visph Ohhh, that is a bit difficult 🙁