CODEWITHSUNDEEP
javascripthtml5-canvas
user7391306
user7391306

Reputation:

How to fill color in particular area?

I have a castle but I don't know how I fill inside that area(castle) by a particular color. I tried fillstyle but it didn't work maybe I'm not doing right or maybe it needs other thing that I'm not using. If you need something else, please don't hesitate in ask. I put the snippet to help you guys understand the problem.

function main() {
  var c2d = document.getElementById("acanvas").getContext("2d");
  c2d.fillStyle = "blue";
  castelo(c2d);
}

function castelo(c2d) { //30 para o lado de baixo
  //40 para o lado de cima
  //20 para baixo
  c2d.fillStyle = "red";
  c2d.beginPath();
  c2d.strokeStyle = 'blue';
  c2d.moveTo(20, 20);
  c2d.lineTo(50, 20);
  c2d.stroke();
  c2d.moveTo(50, 20);
  c2d.lineTo(50, 40);
  c2d.stroke();
  c2d.moveTo(50, 40);
  c2d.lineTo(80, 40);
  c2d.stroke();
  c2d.moveTo(80, 40);
  c2d.lineTo(80, 20);
  c2d.stroke();
  c2d.moveTo(80, 20);
  c2d.lineTo(120, 20);
  c2d.stroke();
  c2d.moveTo(120, 20);
  c2d.lineTo(120, 40);
  c2d.stroke();
  c2d.moveTo(120, 40);
  c2d.lineTo(150, 40);
  c2d.stroke();
  c2d.moveTo(150, 40);
  c2d.lineTo(150, 20);
  c2d.stroke();
  c2d.moveTo(150, 20);
  c2d.lineTo(190, 20);
  c2d.stroke();
  c2d.moveTo(190, 20);
  c2d.lineTo(190, 40);
  c2d.stroke();
  c2d.moveTo(190, 40);
  c2d.lineTo(220, 40);
  c2d.stroke();
  c2d.moveTo(220, 40);
  c2d.lineTo(220, 20);
  c2d.stroke();
  c2d.moveTo(220, 20);
  c2d.lineTo(260, 20);
  c2d.stroke();
  c2d.moveTo(260, 20);
  c2d.lineTo(260, 40);
  c2d.stroke();
  c2d.moveTo(260, 40);
  c2d.lineTo(290, 40);
  c2d.stroke();
  c2d.moveTo(290, 40);
  c2d.lineTo(290, 20);
  c2d.stroke();
  c2d.moveTo(290, 20);
  c2d.lineTo(320, 20);
  c2d.stroke();
  c2d.moveTo(320, 20); //final do castelo em cima
  c2d.lineTo(320, 500);
  c2d.stroke();
  c2d.moveTo(320, 500);
  c2d.lineTo(170, 300);
  c2d.stroke();
  c2d.moveTo(170, 300);
  c2d.lineTo(20, 500);
  c2d.stroke();
  c2d.moveTo(20, 500);
  c2d.lineTo(20, 20);
  c2d.stroke();
  c2d.closePath();
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="capadolivro.js">
  </script>
</head>

<body onload="main();">
  <canvas id="acanvas" width="1366" height="768" />
</body>

</html>

Upvotes: 0

Views: 243

Answers (3)

ecg8
ecg8

Reputation: 1392

I think this is what you want. There were a few things I modified to make your code work.

  • I changed the size of your canvas so it fits more easily in the window for me (you probably have reasons for it being this large on your site)

  • I removed the argument from your castelo() function when called, because it isn't needed

  • you don't need to do a new moveTo after each line segment, canvas remembers where it last was so you can just lineTo the next spot, this change makes your code about 33% smaller

var c2d = document.getElementById("acanvas").getContext("2d");
if (c2d) {
  castelo()
}

function castelo() { //30 para o lado de baixo
//40 para o lado de cima
//20 para baixo
    c2d.fillStyle= "red";	 
    c2d.strokeStyle = "blue";
		c2d.beginPath();
    c2d.moveTo(20,20);
    c2d.lineTo(50,20);
    c2d.lineTo(50,40);
    c2d.lineTo(80,40);
    c2d.lineTo(80,20);
    c2d.lineTo(120,20);
    c2d.lineTo(120,40);
    c2d.lineTo(150,40);
    c2d.lineTo(150,20);
    c2d.lineTo(190,20);
    c2d.lineTo(190,40);
    c2d.lineTo(220,40);
    c2d.lineTo(220,20);
    c2d.lineTo(260,20);
    c2d.lineTo(260,40);
    c2d.lineTo(290,40);
    c2d.lineTo(290,20);
    c2d.lineTo(320,20);  //final do castelo em cima
		c2d.lineTo(320,500);
		c2d.lineTo(170,300);
		c2d.lineTo(20,500);
    c2d.closePath();
		c2d.stroke();
		c2d.fill();
}
<canvas id="acanvas" width="600" height="600" />

Upvotes: 3

George Pushia
George Pushia

Reputation: 134

You don't have to moveTo every time. Just like this:

function main() {
    var c2d = document.getElementById("acanvas").getContext("2d");

    castelo(c2d);
}

function castelo(c2d) { 
	  c2d.beginPath();
    c2d.moveTo(20, 20);
    c2d.lineTo(50,20);
    c2d.lineTo(50,40);
    c2d.lineTo(80,40);
    c2d.lineTo(80,20);
    c2d.lineTo(120,20);
    c2d.lineTo(120,40);
    c2d.lineTo(150,40);
    c2d.lineTo(150,20);
    c2d.lineTo(190,20);
    c2d.lineTo(190,40);   
    c2d.lineTo(220,40);
    c2d.lineTo(220,20);
    c2d.lineTo(260,20);
    c2d.lineTo(260,40);
    c2d.lineTo(290,40);
    c2d.lineTo(290,20);
    c2d.lineTo(320,20);
    c2d.lineTo(320,500);
    c2d.lineTo(170,300);
    c2d.lineTo(20,500);
    c2d.lineTo(20,20);
    c2d.stroke();
    c2d.fillStyle = "red";
    // do not forget about fill(). It also does closePath() for you.
    c2d.fill();  
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="capadolivro.js">
        </script>
    </head>
    <body onload="main();">
        <canvas id="acanvas" width="1366" height="768" />
    </body>
</html>

Upvotes: 1

kshetline
kshetline

Reputation: 13734

You need to do c2d.fill() -- setting the fill style isn't enough. But more than that, you have to do fill() after the complete outline of your castle has been established as the current path.

You won't be able to just stick c2d.fill() at the end of your current code because that would probably fill in all over those lines you've previously stroked.

What you need to do is rearrange your drawing code to do the outline of the castle, both fill then stroke that, then create and stroke any interior detail lines that you want to add.

Upvotes: 0

Related Questions