Canvas border increases the area, draw the border inside the canvas

Question

How to put the border inside the canvas, so it is not expanded by the border:

<canvas width="50" height="50" style="border: 10px solid black"></canvas>



is much bigger than 

<canvas width="50" height="50" style="border: 1px solid black"></canvas>

box-sizing: border-box; doesn't help in this case

Please not that the canvas I am using is rectangular and its shape is not controlled via JavaScript.

have u tried it..? ----> style = "outline: black 3px solid;" — Kiran Mistry, Jun 24 '19 at 13:44
@KiranMistry Thanks, It works! I will go for it - no JS no unnecessary magic — Hairi, Jun 24 '19 at 13:46

Jared Chu · Answer 1 · 2019-06-24T14:06:08.827

0

Use box-shadow in this case if you want to set the width & height by attribute.

#canvas1 {
  -webkit-box-shadow:inset 0px 0px 0px 10px #000;
   -moz-box-shadow:inset 0px 0px 0px 10px #000;
   box-shadow:inset 0px 0px 0px 10px #000;
}

#canvas2 {
  -webkit-box-shadow:inset 0px 0px 0px 1px #000;
   -moz-box-shadow:inset 0px 0px 0px 1px #000;
   box-shadow:inset 0px 0px 0px 1px #000;
}

<canvas id="canvas1" width="50" height="50"></canvas>
<canvas id="canvas2" width="50" height="50"></canvas>

edited Jun 24 '19 at 14:06

answered Jun 24 '19 at 13:41

Jared Chu

2,757
4
27
38

I've set them using attributes – Hairi Jun 24 '19 at 13:47
They're different, do it necessary to set the width/height via attribute? – Jared Chu Jun 24 '19 at 13:52
@JaredChu it's necessary to set width/height via attribute because the CSS one will simply distort the canvas; https://stackoverflow.com/q/2588181/8620333 – Temani Afif Jun 24 '19 at 13:54
I've updated my answer – Jared Chu Jun 24 '19 at 14:06

Canvas border increases the area, draw the border inside the canvas

1 Answers1