Skip to content
← Back to Community
How to do full width in <canvas> element?
Profile icon
RixTheTyrunt

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
hotnewtop
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);