在前端開發中，矩形是一個基本的幾何形狀，它廣泛應用于網頁設計和開發中。而在JavaScript中，使用Canvas API可以輕松地實現各種形狀的繪制，其中包括矩形。

下面是一個簡單的矩形例子：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);

這個例子繪制了一個寬100像素，高100像素的藍色矩形。fillRect()函數用于填充矩形，參數1和參數2分別表示矩形左上角的坐標，參數3和參數4則分別表示矩形的寬和高。

可以通過調整參數的值來改變矩形的大小和位置。比如，將參數2和參數3都增加50：

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

就可以畫出一個左上角坐標為(100, 100)，寬150像素，高150像素的矩形。

除了填充整個矩形，我們也可以只填充矩形的邊框，使用strokeRect()函數即可：

ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 100, 100);

這個例子繪制一個紅色邊框的矩形，邊框寬度為5像素。

我們也可以結合使用fillRect()和strokeRect()函數，來畫出一個既有填充又有邊框的矩形：

ctx.fillStyle = "yellow";
ctx.fillRect(50, 50, 100, 100);
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 100, 100);

這個例子繪制一個黃色填充，紅色邊框的矩形，邊框寬度為5像素。

除了繪制簡單的矩形以外，我們還可以使用Canvas API中的一個函數canvas.isPointInPath()來檢測一個點是否落在矩形中：

ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.closePath();
if (ctx.isPointInPath(75, 75)) {
console.log("Point is inside rectangle");
} else {
console.log("Point is outside rectangle");
}

這個例子檢測點(75, 75)是否在矩形內部，并輸出結果到控制臺。注意，在檢測點是否在矩形內部之前，需要使用beginPath()函數和closePath()函數圍住矩形。

最后，需要提醒的是，Canvas API提供了豐富的繪圖函數和屬性，如果遇到需要繪制矩形以外的復雜圖形，可以選擇使用其他的Canvas函數和屬性來實現。