Help With Canvas

noobatjavascrip · 12-08-2012, 08:36 PM

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>

AndrewGSW · 12-08-2012, 09:09 PM

I would not name your function stroke() - there is already a canvas method of this name and it will only cause confusion and possible conflict.

Inkscape is a free graphics editor that uses bezier curves. However, I can't say that I've used it but thought it worth mentioning. Perhaps it can use the same co-ordinates system as a canvas(??).

I haven't explored canvas but my first thought would be that a path is not fully closed before fill() but, as you say, you have checked this already. Perhaps you need to create the line starting at a different point - so that it will realise you intend to fill the larger area.

AndrewGSW · 12-08-2012, 09:34 PM

Actually, Inkscape looks complicated to me

like most graphics packages.

noobatjavascrip · 12-09-2012, 07:12 AM

When I have time I am going to opt out of the bezier curve methodology and just use straight lines to make the hole. Im thinking maybe because of using lineTo() and bezierCurveTo() that it might be causing some confusion. Also i will change the name of my function

AndrewGSW · 12-09-2012, 11:46 AM

Quote:

Originally Posted by noobatjavascrip

When I have time I am going to opt out of the bezier curve methodology and just use straight lines to make the hole. Im thinking maybe because of using lineTo() and bezierCurveTo() that it might be causing some confusion. Also i will change the name of my function

I would consider splitting larger, regular, regions into a couple of rectangles and triangles. This will make it easier to build in stages, and to also modify (separately) later.

hdewantara · 12-09-2012, 11:35 PM

Is it something like the following?

PHP Code:


			
    function strok(){

        O=document.getElementById('Q');

        var ctx=O.getContext("2d");

        

        ctx.fillStyle= '#996633';

        ctx.strokeStyle = '#cc6633';

        ctx.lineWidth   = 4;

        ctx.beginPath();

        

        //start drawing COUNTER-CLOCKWISE.

        ctx.moveTo(2,400);     //top-left corner

        ctx.lineTo(700,400); //the left surface

        ctx.lineTo(900,650); //entrance floor

        ctx.lineTo(1300,650); //hole floor



        ctx.bezierCurveTo(1300,650,1360,600, 1355, 550); //curved cave ceiling

        ctx.bezierCurveTo(1355,550, 1345, 500, 1325, 470);

        ctx.bezierCurveTo(1325,470, 1200, 380, 1020, 480);

        ctx.bezierCurveTo(1020,480, 1000, 520,975,570);



        ctx.lineTo(850,400);    //straight cave ceiling, back to the surface

        ctx.lineTo(1375,400);    //the right surface

        ctx.lineTo(1375,715); //to bottom-right corner

        ctx.lineTo(2,715);     //to bottom-left corner



        ctx.closePath();

        ctx.fill();

        ctx.stroke();

    }