ctx.strokeStyle works, but not ctx.fillStyle without error message-CodePudding

This is my code for making the Vietnamese flag. For some reason, only strokeStyle works and not fillStyle. I have no clue why. I've tried to remove the red color to only show the yellow color on the canvas but that only makes the whole canvas yellow.

<!DOCTYPE html>
<html lang="no-NB">
<head>
    <title>Canvas Vietnam Flagg</title>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge" />
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            background-color: #333;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: Arial, Helvetica, sans-serif;
            min-height: 100vh;
            margin: 0;
        }
        #canvas {
            background: #f0f0f0;
            border-radius: 0px;
        }
    </style>
</head>
<body>
<h1>Vietnam flagg</h1>

<canvas id="canvas" width="640"
        height="426"></canvas>

<script>
    const canvas =document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    // bakgrunn
    ctx.fillStyle = "rgb(218, 37, 29)";
    ctx.fillRect(0,0,640, 426);
    // stjerne
    ctx.beginPath();
    // 2-3
    ctx.moveTo(320, 86);
    ctx.lineTo(278, 170);
    // 3-4
    ctx.moveTo(278, 170);
    ctx.lineTo(194, 170);
    // 4-5
    ctx.moveTo(194, 170);
    ctx.lineTo(257, 233);
    // 5-6
    ctx.moveTo(257, 233);
    ctx.lineTo(236, 317);
    // 6-7
    ctx.moveTo(236, 317);
    ctx.lineTo(320, 275);
    // 7-8
    ctx.moveTo(320, 275);
    ctx.lineTo(404, 317);
    // 8-9
    ctx.moveTo(404, 317);
    ctx.lineTo(383, 233);
    // 9-10
    ctx.moveTo(383, 233);
    ctx.lineTo(446, 170);
    // 10-11
    ctx.moveTo(446, 170);
    ctx.lineTo(362, 170);
    // 11-2
    ctx.moveTo(362, 170);
    ctx.lineTo(320, 86);

    ctx.strokeStyle = "rgb(255, 255, 0)";
    ctx.fillRect(0, 0, ctx.beginPath, ctx.closePath);
    ctx.fillStyle ="rgb(255, 255, 0)";
    ctx.fillRect(0, 0, ctx.beginPath, ctx.closePath);
    ctx.closePath();
    ctx.stroke();

</script>
</body>
</html>

I've tried to change the order of strokeStyle and fillStyle but nothing changes.

CodePudding user response：

You are doing useless move operations, you have to continue the drawing from the initial point until you reach it again before filling using the ctx.fill method instead of the ctx.fillRect like this:

<!DOCTYPE html>
<html lang="no-NB">
<head>
    <title>Canvas Vietnam Flagg</title>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge" />
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            background-color: #333;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: Arial, Helvetica, sans-serif;
            min-height: 100vh;
            margin: 0;
        }
        #canvas {
            background: #f0f0f0;
            border-radius: 0px;
        }
    </style>
</head>
<body>
<h1>Vietnam flagg</h1>

<canvas id="canvas" width="640"
        height="426"></canvas>

<script>
    const canvas =document.getElementById('canvas')
    const ctx = canvas.getContext('2d')

    // bakgrunn
    ctx.fillStyle = "rgb(218, 37, 29)";
    ctx.fillRect(0,0,640, 426);
    // stjerne
    ctx.beginPath();
    // 2-3
    ctx.moveTo(320, 86);
    ctx.lineTo(278, 170);
    // 3-4
    ctx.lineTo(194, 170);
    // 4-5
    ctx.lineTo(257, 233);
    // 5-6
    ctx.lineTo(236, 317);
    // 6-7
    ctx.lineTo(320, 275);
    // 7-8
    ctx.lineTo(404, 317);
    // 8-9
    ctx.lineTo(383, 233);
    // 9-10
    ctx.lineTo(446, 170);
    // 10-11
    ctx.lineTo(362, 170);
    // 11-2
    ctx.lineTo(320, 86);

    ctx.strokeStyle = "rgb(255, 255, 0)";
    ctx.fillStyle ="rgb(255, 255, 0)";
    ctx.fill();
    ctx.stroke();

</script>
</body>
</html>

Best luck!