Javascript 使用画布在矩形中绘制矩形？

我必须在矩形中使用画布和输出矩形（矩形的数量取决于我在代码中输入的矩形数量），并且矩形应该很好地适合前一个矩形。我真的不知道如何将矩形居中，并将它们放在前一个矩形中。我知道为什么我的输出是这样的，但我不确定从这里走到哪里。这就是我所拥有的，任何帮助都将不胜感激

window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
var c=canvas.getContext（“2d”）；//创建HTML5上下文对象以启用绘图方法
绘制的矩形图（c、200、100、6、500、400，“红色”）；
};		
函数drawNestedRectangles（上下文、whereX、whereY、数量、宽度、高度、颜色）{
context.beginPath（）；
context.rect（其中x，其中y，宽度，高度）；
context.fillStyle=“白色”；
context.fill（）；
context.lineWidth=4；
context.strokeStyle=颜色；
stroke（）；
对于（var i=0；i您只需简单地移动矩形（添加x和y值），并相应地更改宽度和高度（基本上再减去5以使其适合最后一个）：



window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
var c=canvas.getContext（“2d”）；//创建HTML5上下文对象以启用绘图方法
绘制的矩形图（c、200、100、6、500、400，“红色”）；
};		
函数drawNestedRectangles（上下文、whereX、whereY、数量、宽度、高度、颜色）{
context.beginPath（）；
context.rect（其中x，其中y，宽度，高度）；
context.fillStyle=“白色”；
context.fill（）；
context.lineWidth=4；
context.strokeStyle=颜色；
stroke（）；
对于（var i=0；ii），我将替换这部分代码

for(var i=0; i<howMany - 1; i++) {
    whereX = whereX - 5;
    whereY = whereY - 5;
    width = width - 5;
    height = height - 5;

for（var i=0；i@JamesC.是的，我们只需要这样做：<代码>上下文。FILTEX（Hello），TeNeX +（宽度/ 2），Wase+（高度/ 2）。基本上把文本放在主三角形的中心与把它放在最后一个三角形中一样。我已经更新了我的问题，在中间添加文本。
for(var i=0; i<howMany - 1; i++) {
    whereX = whereX - 5;
    whereY = whereY - 5;
    width = width - 5;
    height = height - 5;

for (var i = 0; i < howMany - 1; i++) {
    whereX = whereX + context.lineWidth*2;
    whereY = whereY + context.lineWidth*2;
    width = width - context.lineWidth*4;
    height = height - context.lineWidth*4;