Soy muy nuevo en la codificación y no tengo idea de lo que estoy haciendo. Creé un diamante en mi lienzo en el archivo JS, usando "+c+", pero sigue volviendo negro. Cualquier ayuda sería muy apreciada, me está volviendo loco.
const ctx = document.querySelector("canvas").getContext('2d') const w = 200 const h = 200 diamond(w / 2, h / 2, 50, 50, 260, 0.5); function diamond(x, y, w, h, c, a) { x = x - w / 2; y = y - h / 2; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w, y + h); ctx.lineTo(x, y + h * 2); ctx.lineTo(x - w, y + h); ctx.lineTo(x, y); ctx.fillStyle = "hsal(" + c + ", 100%, 50%, " + a + ")"; ctx.fill(); } <canvas width="200" height="200"></canvas>Este:
ctx.fillStyle = "hsal(" + c + ", 100%, 50%, " + a + ")";Debe cambiarse por:
ctx.fillStyle = "hsl(" + c + ", 100%, 50%, " + a + ")";Por lo que puedo decir, su color no tiene un valor y su diamante se muestra como negro.
Editado como respuesta