Adding Flood Fill to this Canvas?

JavaScript
1

Hi,

I have an HTML canvas object on which I am drawing with JavaScript. I’ve created a rough sketch of Kentucky like so:

<html>
    <head>
    </head>
    <body>
        <canvas id="mainCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>
        <script>
            var canvas = document.getElementById("mainCanvas");
            var context = canvas.getContext("2d");
            /* Draw Kentucky */
            context.fillStyle = "#00A800";
            context.fillRect(1,16,527,440);
            context.fillStyle = "#00A800";
            context.strokeStyle="#54FC54"; // Light Green, COLOR 10 in QB.
            context.fillStyle = "#00A800"; // Darker Green, COLOR 2 in QB.
            context.fill();
            context.stroke();
            context.moveTo(105,190);
            context.lineTo(150, 190);
            context.lineTo(150, 185);
            context.lineTo(276, 185); // 290, 185
            context.moveTo(276, 185);
            context.lineTo(301, 175);
            context.lineTo(305, 160);
            context.lineTo(310, 155);
            context.lineTo(305, 145);
            context.lineTo(300, 125);
            context.lineTo(290, 110);
            context.lineTo(275, 95); // 1
            context.lineTo(270, 95); // 1
            context.lineTo(260, 100); // 1
            context.lineTo(250, 100); // 1
            context.lineTo(240, 90); // 1
            context.lineTo(235, 85); // 1
            context.lineTo(230, 85); // 1
            context.lineTo(220, 90); // 1
            context.lineTo(220, 100); // 1
            context.lineTo(210, 105); // 1
            context.lineTo(205, 115); // 1
            context.lineTo(195, 125); // 1
            context.lineTo(170, 130); // 1
            context.lineTo(165, 135); // 1
            context.lineTo(130, 140); // 1
            context.lineTo(120, 150); // 1
            context.lineTo(120, 160); // 1
            context.lineTo(115, 165); // 1
            context.lineTo(105, 170); // 1
            context.lineTo(105, 190); // 1
            context.strokeStyle="#54FC54"; // Light Green, COLOR 10 in QB.
            context.stroke();
            /* End Kentucky */
        </script>
    </body>
</html>

Now I need to flood fill inside the outline I’ve drawn, but it can’t flow outside. How could I accomplish this?

Thanks,
Dave

2

Hey,

You can fill that path before drawing the stroke.

context.fillStyle = "#ff0000";
context.fill();
context.strokeStyle="#54FC54"; // Light Green, COLOR 10 in QB.
context.stroke();

Canvas paints over the top of the existing content so the order is important.

1 Like
3

Awesome! That works perfectly! Thanks so much!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.