JavaScript Canvas绘制矩形无法显示问题求助

现有代码错误列表 #

• HTML结构嵌套错误：<body>标签错误放在了<head>标签内部，不符合HTML规范，需要调整嵌套顺序
• 矩形调用参数错误：main.js中调用rectangle时第二个参数误写为25.50，用小数点代替了逗号，导致缺少宽度参数，函数接收到的高度值为undefined无法绘制
• 颜色值拼接错误：drawer.js的fillColor函数中拼接rgb颜色字符串格式完全错误，缺少左括号，还多写了无关字符n，导致fillStyle赋值无效，填充样式不生效

修复后代码 #

index.html #

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script src="drawer.js"></script>
    <script src="main.js"></script>
</body>
</html>

main.js #

var canvas = document.getElementById("myCanvas")
var render = canvas.getContext("2d")

fillColor(255,0,125)
rectangle(25,25,50,100)

drawer.js #

function rectangle(x, y, w, h){
    render.beginPath()
    render.rect(x, y, w, h)
    render.fill()
    render.stroke()
}
function fillColor(r, g, b){
    render.fillStyle = `rgb(${r}, ${g}, ${b})`
}

修改完成后刷新页面即可正常显示对应矩形。

内容的提问来源于stack exchange，提问作者t1txn