+ 5

How to resize canvas when orientation changes?

https://code.sololearn.com/WGsa9Dyoter7/?ref=app screen.width works fine but not window.innerWidth ,why so?

29th Sep 2020, 11:44 PM

Abhay

2 Answers

+ 3

You can resize similar to that without any JavaScript. Leave the JS tab empty and use the following HTML and CSS. HTML: <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <canvas id="canva"></canvas> </body> </html> CSS: html, body { padding: 0; margin: 0; } #canva{ background-color: red; width: 100%; height: 50px; } When you actually want to draw on the canvas, I would set the width and height attributes. The width and height attributes of a canvas represent resolution of its pixel data so not matching them up can lead to stretched, blurry or inefficient graphics. When you're about to draw, you could do something like this: var canvas = document.getElementById('canva'); canvas.setAttribute('width', canvas.clientWidth); canvas.setAttribute('height', canvas.clientHeight);

30th Sep 2020, 12:11 AM

Josh Greig