Javascript - 曲線矩形をプロットする関数

Question

与えられたxy座標、幅、高さを持つhtmlキャンバス内に曲線の矩形を描画する関数を作成しようとしていますが、スクリプトは現在空のキャンバスを出力しています。コードが長方形を描画しないのはなぜですか？

var c=document.getElementById(id); 
var ctx=c.getContext('2d'); 

function makeCurvedRect(x, y, w, h) { 
    ctx.beginPath(); 
    ctx.moveTo(x+10, y); 
    ctx.lineTo(x+w-10, y); 
    ctx.quadraticCurveTo(x+w, y, x+w, y+10); 
    ctx.lineTo(x+w, y+h-10); 
    ctx.quadraticCurveTo(x+w, y+h, x+w-10, y+h); 
    ctx.lineTo(x+10, y+h); 
    ctx.quadraticCurveTo(x, y+h, x, y+h - 10]); 
    ctx.lineTo(x, y+10); 
    ctx.quadraticCurveTo(x, y, x+10, y); 
    ctx.stroke(); 
} 

makeCurvedRect(162.5,40,175,175); 

Answer 1

それは、あなたが原因このライン

ctx.quadraticCurveTo(x, y+h, x, y+h - 10]); 
             ^this 

で不要な角括弧（]）を持っているので、コードはそれがあなたを思わ

var c = document.getElementById('canvas'); 
 
var ctx = c.getContext('2d'); 
 

 
function makeCurvedRect(x, y, w, h) { 
 
    ctx.beginPath(); 
 
    ctx.moveTo(x + 10, y); 
 
    ctx.lineTo(x + w - 10, y); 
 
    ctx.quadraticCurveTo(x + w, y, x + w, y + 10); 
 
    ctx.lineTo(x + w, y + h - 10); 
 
    ctx.quadraticCurveTo(x + w, y + h, x + w - 10, y + h); 
 
    ctx.lineTo(x + 10, y + h); 
 
    ctx.quadraticCurveTo(x, y + h, x, y + h - 10); 
 
    ctx.lineTo(x, y + 10); 
 
    ctx.quadraticCurveTo(x, y, x + 10, y); 
 
    ctx.stroke(); 
 
} 
 
makeCurvedRect(60, 60, 175, 175);

canvas { 
 
    border: 1px solid black; 
 
}

<canvas id="canvas" width="300" height="300"></canvas>