How Do I Center A Rectangle On A Canvas

I have the vaguest idea why this block of code won't center the rectangle on the canvas. It even ends up being drawn out of bounds. Please help? document.addEventListener('DOMCon

Solution 1:

To center the rectangle on the canvas, you'll need to know the width of the canvas. Then it's pretty easy. The x of your rect would be canvasWidth/2 - rectangleWidth/2

So in your case:

contextOne.fillRect(fixedBody.width/2 - (200/2), 0, 200, fixedBody.height);

Solution 2:

It seems to work just fine:

functiondrawIllustrations() {                                                                              const fixedBody = document.getElementById('FixedBody');                                                  const contextOne = fixedBody.getContext('2d');                                                            const centerX = fixedBody.offsetWidth * 0.5;                                                                                        
   contextOne.fillStyle = "#BFFF00";                        
   contextOne.fillRect(centerX - 100, 0, 200, fixedBody.offsetHeight);
}

drawIllustrations();

canvas {
  border: 1px solid #000;
}

<canvasid="FixedBody"width="300"height="200"/>

The only things I can see that may be a bit odd:

• The height is from the top to the bottom of the canvas. This may look like it's going off. If you want it only a portion, you should adjust it.
• You are using a fixed width of 200 for the rectangle. If the canvas is less than that, it will go off (though still be centered).

If you wanted the rectangle to always be within the canvas, you could set the width and height to be relative to the canvas (like say, 75% of it's size, for example):

functiondrawIllustrations() {                                                                              const fixedBody = document.getElementById('FixedBody');                                                  const contextOne = fixedBody.getContext('2d');                                                            const centerX = fixedBody.width * .5;
   const centerY = fixedBody.height * .5;

   contextOne.fillStyle = "#BFFF00";                        
   contextOne.fillRect(centerX - (fixedBody.width * .75 / 2), centerY - (fixedBody.height * .75 / 2), fixedBody.width * .75, fixedBody.height * .75);
}

drawIllustrations();

canvas {
  border: 1px solid #000;
}

<canvasid="FixedBody"width="300"height="200"/>

The only other thing, is since in your example you used offsetWidth and offsetHeight instead of just width and height, if the canvas had any padding or borders, it would be offset by that much. In general, when working with the canvas, stick with width and height as they only take into account the size of the actual canvas, not it's related border and padding.

Here is an example of what lots of padding and just two sides will do if using offsetWidth and offsetHeight (everything else is the same as the above example:

functiondrawIllustrations() {                                                                              const fixedBody = document.getElementById('FixedBody');                                                  const contextOne = fixedBody.getContext('2d');                                                            const centerX = fixedBody.offsetWidth * .5;
   const centerY = fixedBody.offsetHeight * .5;

   contextOne.fillStyle = "#BFFF00";                        
   contextOne.fillRect(centerX - (fixedBody.offsetWidth * .75 / 2), centerY - (fixedBody.offsetHeight * .75 / 2), fixedBody.width * .75, fixedBody.offsetHeight * .75);
}

drawIllustrations();

canvas {
  border: 1px solid #000;
  padding: 200px200px00;
}

<canvasid="FixedBody"width="300"height="200"/>