How to do full width in <canvas> element?

I got full width in a <div> object, but now, the same style ( in the style attribute ) , doesn't work in a <canvas> object. How to fix it so that the right will have -8px away from the right side. So, how to do that?

Answered by sedated [earned 5 cycles]

View Answer

Voters

Profile icon

RixTheTyrunt

Comments

hot new top

Profile icon

sedated

You can use javascript to resize your canvas without losing quality when using css.


var canvas = document.getElementById("canvasID");
canvas.width = window.innerWidth - 8 // subtracts 8px from the width
canvas.height = window.innerHeight;

Then you can use CSS to remove the margin & padding.


body {
 margin: 0 !important;
 padding: 0 !important;
}

Profile icon

RixTheTyrunt

[email protected] Y0U F0R H3LP

Profile icon

RixTheTyrunt

Next question upcoming :/

Profile icon

Coder100

you can do this with css or js.

CSS


canvas {
  width: 100vw;
  height: 100vh;
}

js

this method will only change one of the canvases, the first canvas.


// get canvas
const canvas = document.querySelector("canvas");

canvas.width = innerWidth;
canvas.height = innerHeight;

Profile icon

RixTheTyrunt

Sorry, I know your answer is same, but @sedated's code is a bit easier to understand, yours is a confusing

Profile icon

ch1ck3n

why cant you just do width: calc(100% - 16px);

How to do full width in <canvas> element?

Comments

CSS.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

js.css-1q3m8ps{margin-left:var(--space-4);margin-right:var(--space-4);display:none;}

CSS

js