I have programmed a website with a game and the canvas of the game is 1420x700px.
I want to make the website responsive and I can do it, but I don't know how I can make the canvas of the JS file responsive.
So that I can adjust that the canvas of the game is smaller for laptops, but fullscreen for tablets and mobile phones.
Is there any function that allows me to adjust the canvas the way I want it?
It should be noted that the game was programmed with the P5 library and that - in my experience - the whole thing works a little differently than JavaScript.
You don't need a JS, just CSS Media Queries
But how do I adjust the canvas that I have defined in the JS file?
You can redraw after resizing with https://p5js.org/reference / # / p5 / resizeCanvas. Using the windowWidth constant, you can initially determine which screen size you are currently dealing with. After that you only need to calculate the correct aspect ratio. The library also provides functions to react to changes in the window size of the browser and to use anti-aliasing to improve the image quality. Look up https://p5js.org/.
Alternatively, you can try https://www.mediaevent.de/css/media-queries.html. You can find a few size orientations https://css-tricks.com/snippets/css/media-queries-for-standard-devices/.
(…) and the whole (…) works a little differently than JavaScript.
p5.js is a library developed with and for JavaScript. It implements various functions that mainly help you with drawing. But nothing more. This does not change the JavaScript language.
Many thanks
I have added a picture of the script. Where do I have to write resizeCanvas there and what do I have to change?
And how do I manage to style the canvas with the help of CSS, because at the moment it doesn't work (only margin etc. But width and height don't).
And how do I do that with all the pictures? So that they scale to the right size?
1) What do you think? At what point would it be cheap to scale the canvas to the right size and why?
2) https://jsfiddle.net/c91nf2ay/
You don't need the margin property to scale. It only relates to the outside distance of an element.
3) Images drawn on the canvas automatically scale with the size of the canvas.
I would say that I have to scale the canvas at the beginning of the setup function so that it loads first.
For me, the images do not automatically scale with the size because I also specified the size for these. Do I have to change it here anyway?
Exactly.
Right. I once briefly built an example in which the image scaled with the orientation of the canvas width: https://jsfiddle.net/fq59kym4/.
With JavaScript you could make the image size mathematically dependent on that of the canvas. Image width / 3 would mean, for example, that the image always takes up a third of the area (width) of the canvas.
imageWidth = width / procentualValue;
Thank you.
