Why canvas resolution is so low in pure JS ? How to fix it ?

Question

When i make a sketch in pure Javascript (no framework) the optput is in very low resolution and not according to the device resolution.

Whereas , when I make the same sketch in p5.js its perfect , fit according to the device resolution.

https://code.sololearn.com/W174sq4F25hH/?ref=app
https://code.sololearn.com/W8hjF7G8hpo7/?ref=app

Why is it so? Pure JS is even more low resolution in PC and when I save it sketch as an image it's small according to what is displayed .
P5 the image is same as optput .

Answer 1

Because you didn't set it's size :P

can.width = window.innerWidth;
can.height = window.innerHeight;

Answer 2

@Burey, it's a good idea. Just should use it with static values like "600 * wRatio".

Because if you want it to have the full width you will get results like this:
https://code.sololearn.com/Wg55yn7S87yd/?ref=app

Answer 3

i would also suggest adding in CSS

canvas{
border:1px solid black;
}

just to see where the canvas actually starts and end

Answer 4

@Utkarsh, it's not streched.😃

Ellipse and arc use different arguments.
Arc takes a radius and ellipse takes a width and height.

You have set the radius on arc to 20 which makes it's width/height 40.
And with ellipse have you set the width/height to 20.

Answer 5

i would recommend adding ratio multipliers

var wRatio = 0.95;
var hRatio = 0.90;

can.width = window.innerWidth * wRatio;
can.height = window.innerHeight * hRatio;

Answer 6

you can view the p5.js file and find out which method they used

and i use ratio multipliers usually to set different size for mobile

especially when i want some space for buttons and such

Answer 7

I looked in p5 library it was wayyyyyyyyyyyy to complex to understand . I guess bit of blur is fine
:-P

Answer 8

@Tim G : I thought CSS - width:100%; height:100%;
will do the same thing . Its still bit blurred compared to p5's sketch but i think this much is enough .

Why these important things aren't covered in the course (-_-;)

Answer 9

@Burey : What does ratio multipliers do , that doesn't made much difference .

I don't understand what magic p5 does that it becomes total bur free

Answer 10

The reason behind that may be that the one pixel on normal screens corresponds to four pixels on retina displays and some mobile screens.
Afaik displayWidth in p5ks takes into account pixel density after some issue with retina displays

edit: I didn't see that you fixed the issue already