Javascript - Write Screenwidth Screensize

Question

I am trying to resize a CSS Canvas, and it is controlled with this Javascript currently.

I'm not best at Javascript : but is there a way to get the screenwidth and then just use that data rather than a less than and else.

So say screen size is 390x500. Can I not just get the screen.width and say -5 from it. Make it that size? So 390x500 would be '385'.

        screenwidth = screen.width;

            if (screenwidth < 400) {
                canvas.width = 375;
                canvas.height = 200;
            } else {
                canvas.width = 500;
                canvas.height = 300;
            }

Sorry, I didn't clarify. This is for sizing a signature pad. Messing with the CSS or HTML mucks everything. The sizing is handled within a large Javascript with coordinates etc...

Answer is: canvas.width = screen.width - 5;

Thx, don't know why I didn't see that was what I should have tried.

Can I not just get the screen.width and say -5 from it. Make it that size? So 390x500 would be '385'. Have you tried? — Scott Marcus
– Scott Marcus, Commented Nov 27, 2018 at 2:53
Conditional styles are what CSS Media Queries are for. Also, in CSS, you can just say canvas { width:calc(100% - 5px); }, to get your result. No JavaScript needed. — Scott Marcus
– Scott Marcus, Commented Nov 27, 2018 at 2:55
Phix thx : that worked. I tweaked a bit to be - 25. But seems to work fine. Dacre - havent tried urs but may. Its for a signature pad and playing with the CSS wrecks everything. The width call only seems to work in the Javascript. Don't know why I didn't see that as plain as day. — Merle_the_Pearl
– Merle_the_Pearl, Commented Nov 27, 2018 at 17:31

Dacre Denny · Accepted Answer · 2018-11-27 02:59:52Z

1

Yes this is possible - you might find document.body.clientWidth is more useful for what you are trying to do here, as this will give you the dimensions of your current document (webpage) rather than dimenions of your entire phyiscal display in pixels (ie via screen).

So for instance, if you wanted the canvas' width to dynamically update to be 5px less than the current webpage width, you could do this:

function updateCanvasSize() {
  
  var canvas = document.body.querySelector('canvas');
  
  // Set canvas width to document width, minus 5
  canvas.width = document.body.clientWidth - 5;
}

// Causes canvas resize to happen when window is resized
window.addEventListener('resize', updateCanvasSize);

// Init canvas size on startup
updateCanvasSize();

canvas {
border:1px solid red;
}

<canvas></canvas>

Alternatively, you could take the following pure CSS approach to achieve the same result:

canvas {
  border:1px solid red;
  width:calc(100% - 5px);
}

<canvas></canvas>

edited Nov 27, 2018 at 2:59

answered Nov 27, 2018 at 2:52

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scott Marcus Over a year ago

How about just canvas { width:calc(100% - 5px); } and be done?

Dacre Denny Over a year ago

@ScottMarcus yes, good point - just updated the answer, thanks for that!

Scott Marcus · Accepted Answer · 2018-11-27 03:06:45Z

1

Conditional styles are what CSS Media Queries are for.

And they make the need for JavaScript go away:

/* Default styling: */
canvas { 
  border:2px solid red;
  width:calc(100% - 5px);  /* Does exactly what it looks like it does */
  height:200px;
}

/* Conditional style that only kicks in when the viewport is at least 400px wide              */
@media (min-width:400px){
  canvas { height:300px; }  /* Only define what needs to be changed */
}

<canvas></canvas>

edited Nov 27, 2018 at 3:06

answered Nov 27, 2018 at 3:04

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Comments

Merle_the_Pearl · Accepted Answer · 2018-11-29 22:28:22Z

0

Sorry, I didn't clarify. This is for sizing a signature pad. Messing with the CSS or HTML mucks everything. The sizing is handled within a large Javascript with coordinates etc...

Answer is: canvas.width = screen.width - 5;

Thx, don't know why I didn't see that was what I should have tried.

answered Nov 29, 2018 at 22:28

Merle_the_Pearl

1,5213 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Javascript - Write Screenwidth Screensize

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related