Home/ Questions/Q 6781901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:40:42+00:00

The result of the square border turns out to be different width, it seems

  • 0

The result of the square border turns out to be different width, it seems that the right and the bottom border’s width is 2x wider than the left and the top border’s width. Why so weird? I want the border of all sides to have the same width.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Test</title>
<script type="text/javascript">
  function draw () {
    var canvas = document.getElementById('rectangle');
    var ctx = canvas.getContext('2d');

    ctx.save();
    ctx.lineWidth = 30;
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,100,100);
    ctx.strokeStyle = "red";
    ctx.strokeRect(0,0,100,100);        
    ctx.restore();
  }
</script>
</head>

<body onload="draw()">
<canvas id="rectangle"></canvas>
</body>
</html>

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That’s because your border is being cut off at the top and the left, because that’s where the canvas starts, and if your rectangle starts at (0,0), the left border’s left end’s x co-ordinate will be -30.

    Make the starting co-ordinates anything above 30 (so that the end of your borders aren’t negative), and it’ll work fine.

    Demo

    • 0