CODEWITHSUNDEEP
javascripthtmlcanvas
user2923395
user2923395

Reputation: 327

Trying to fill in two different colors in canvas fill()

I'm trying to draw a house using Canvas and Javascript. If you look at my drawHouse() method, I want to color the roof red, and everything else white. But only the white is filling in to color everything.

Jsfiddle link

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>My Site's Title</title>
</head>
<body>

    <canvas id="myDrawing" width="300" height="300" style="border:1px solid #EEE">
    </canvas>
        <script>
            var canvas = document.getElementById("myDrawing");
            var ctx = canvas.getContext("2d");

            //draws a house
            function drawImage() {
                drawSky();
                drawGrass();
                drawHouse();
            }



            //sets the dimensions of the canvas
            var x = canvas.width / 2;
            var y = 400;
            var radius = 200;
            var startAngle = 0;
            var endAngle = 22 * Math.PI;



            //draws the sky

            function drawSky() {
                var context = canvas.getContext('2d');

                context.beginPath();
                context.rect(0, 0, 300, 300);
                context.fillStyle = '#0099FF';
                context.fill();
                context.lineWidth = 1;
                context.strokeStyle = 'black';
                context.stroke();
            }
            //draws green grass
            function drawGrass() {
                ctx.beginPath();
                ctx.arc(x, y, radius, startAngle, endAngle);
                ctx.stroke();
                ctx.fillStyle = "#009900";
                ctx.fill();

            }

            function drawHouse() {
                var c = document.getElementById('myDrawing');
                var ctx = c.getContext('2d');
                ctx.beginPath();
                ctx.moveTo(95, 165);
                ctx.lineTo(140, 215);
                ctx.lineTo(260, 215);
                ctx.lineTo(240, 165);
                ctx.lineTo(95, 165);
                ctx.closePath();
                ctx.fillStyle = "#C81E1E";
                ctx.fill();


                ctx.moveTo(139, 215);
                ctx.lineTo(94, 165);
                ctx.lineTo(45, 215)
                ctx.closePath();
                ctx.fillStyle = "white";
                ctx.fill();


                ctx.moveTo(48, 212);
                ctx.lineTo(48, 275);
                ctx.lineTo(139, 275);
                ctx.lineTo(139, 215);
                ctx.lineTo(45, 215);
                ctx.closePath();
                ctx.fillStyle = "white";
                ctx.fill();
                ctx.stroke();           


                ctx.moveTo(139, 275);
                ctx.lineTo(260, 267);
                ctx.lineTo(260, 215);
                ctx.lineTo(140, 215);

                ctx.closePath();
                ctx.fillStyle = "white";
                ctx.fill();
                ctx.stroke();

            }
            drawImage();
        </script>        
</body>
</html>

Upvotes: 1

Views: 3854

Answers (1)

Jason
Jason

Reputation: 1959

You are missing a call to ctx.beginPath in your drawHouse funciton. The fillStyle is per path, so will need to have multiple paths.

Here is the fiddle: http://jsfiddle.net/sVDSs/6/

            var canvas = document.getElementById("myDrawing");
            var ctx = canvas.getContext("2d");

            //draws a house
            function drawImage() {
                drawSky();
                drawGrass();
                drawHouse();
            }



            //sets the dimensions of the canvas
            var x = canvas.width / 2;
            var y = 400;
            var radius = 200;
            var startAngle = 0;
            var endAngle = 22 * Math.PI;



            //draws the sky

            function drawSky() {
                var context = canvas.getContext('2d');

                context.beginPath();
                context.rect(0, 0, 300, 300);
                context.fillStyle = '#0099FF';
                context.fill();
                context.lineWidth = 1;
                context.strokeStyle = 'black';
                context.stroke();
            }
            //draws green grass
            function drawGrass() {
                ctx.beginPath();
                ctx.arc(x, y, radius, startAngle, endAngle);
                ctx.stroke();
                ctx.fillStyle = "#009900";
                ctx.fill();

            }

            function drawHouse() {
                var c = document.getElementById('myDrawing');
                var ctx = c.getContext('2d');
                ctx.beginPath();
                ctx.moveTo(95, 165);
                ctx.lineTo(140, 215);
                ctx.lineTo(260, 215);
                ctx.lineTo(240, 165);
                ctx.lineTo(95, 165);
                ctx.fillStyle = "red";
                ctx.closePath(); 
                ctx.fill();

                ctx.beginPath(); // THIS IS THE LINE
                ctx.moveTo(139, 215);
                ctx.lineTo(94, 165);
                ctx.lineTo(45, 215)
                ctx.closePath();
                ctx.fillStyle = "white";
                ctx.fill();


                ctx.moveTo(48, 212);
                ctx.lineTo(48, 275);
                ctx.lineTo(139, 275);
                ctx.lineTo(139, 215);
                ctx.lineTo(45, 215);
                ctx.closePath();
                ctx.fillStyle = "white";
                ctx.fill();
                ctx.stroke();           


                ctx.moveTo(139, 275);
                ctx.lineTo(260, 267);
                ctx.lineTo(260, 215);
                ctx.lineTo(140, 215);

                ctx.closePath();
                ctx.fillStyle = "white";
                ctx.fill();
                ctx.stroke();

            }
            drawImage();

Upvotes: 4

Related Questions