<canvas id="myCanvas" width="400" height="200"></canvas>
var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  
  // Canvas dimensions
  var canvasWidth = canvas.width;
  var canvasHeight = canvas.height;
  
  // Rectangle dimensions
  var rectWidth = 50;
  var rectHeight = 50;
  
  // Calculating top-left corner position for centering the rectangle
  var rectX = (canvasWidth - rectWidth) / 2;
  var rectY = (canvasHeight - rectHeight) / 2;
  
  ctx.fillStyle = "rgb(200, 0, 0)";
  ctx.fillRect(rectX, rectY, rectWidth, rectHeight);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.