<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.