I'm very new to coding and have no idea what I'm doing. I created a diamond in my canvas in the JS file, using the "+c+" but it keeps coming back black. Any help would be much appreciated, it's driving me crazy.
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>This:
ctx.fillStyle = "hsal(" + c + ", 100%, 50%, " + a + ")";
Should be changed into:
ctx.fillStyle = "hsl(" + c + ", 100%, 50%, " + a + ")";
From what I can tell your color doesn't have a value and your diamond shows as black.
Edited as an answer