draw a rectangle in the middle of an html canvas code example

Example: how to draw square to the center in canvas

<style>
      .main-canvas {
        margin: 20px;
        border: 1px solid black;
      }
</style>

<canvas width="600" height="400" class="main-canvas"></canvas>

const canvas = document.querySelector('.main-canvas');
const ctx = canvas.getContext('2d');

ctx.fillRect(200, 100, 200, 200);