I have a canvas set up. What I am going to do is have an ant go down into a anthole. So far The only thing I have is the ground with the anthole. The problem I am running into is not being able to fill the ground with the color I want. Instead it fills the hole i made using bezier Curves. I dont understand why. I have all my points connecting and it closes. But when I use fill style i fills in the bezier curve instead of all of the negative space. I would appreciate the help. Thanks
Code:
<!DOCTYPE html>
<html>
<head>
<script>
function stroke(){
O=document.getElementById('Q')
var ctx=O.getContext("2d");
ctx.fillStyle= '#996633';
ctx.strokeStyle = '#cc6633';
ctx.lineWidth = 4;
ctx.beginPath();
// first part of the ground
ctx.moveTo(2,400);
ctx.lineTo(700,400);
//2nd part of ground
ctx.moveTo(850,400);
ctx.lineTo(1375,400);
//first part of downward slope
ctx.moveTo(700,400);
ctx.lineTo(900,650);
ctx.moveTo(900,650);
ctx.lineTo(1300,650);
//second part of downward slope
ctx.moveTo(850,400);
ctx.lineTo(975,570);
ctx.moveTo(1300,650);
ctx.bezierCurveTo(1300,650,1360,600, 1355, 550);
ctx.bezierCurveTo(1355,550, 1345, 500, 1325, 470);
ctx.bezierCurveTo(1325,470, 1200, 380, 1020, 480);
ctx.bezierCurveTo(1020,480, 1000, 520,975,570);
//close close path
ctx.moveTo(2,400);
ctx.lineTo(2,715);
ctx.moveTo(2,715);
ctx.lineTo(1375,715);
ctx.moveTo(1375,715);
ctx.lineTo(1375,400);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
</script>
</head>
<body onload="stroke('Q')">
<canvas id="Q" height="720" width="1380" ></canvas>
</body>
</html>