Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help With Canvas

    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>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.
    Last edited by AndrewGSW; 12-08-2012 at 09:18 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Actually, Inkscape looks complicated to me like most graphics packages.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by noobatjavascrip View Post
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    350
    Thanks
    9
    Thanked 51 Times in 50 Posts
    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,6001355550); //curved cave ceiling
            
    ctx.bezierCurveTo(1355,55013455001325470);
            
    ctx.bezierCurveTo(1325,47012003801020480);
            
    ctx.bezierCurveTo(1020,4801000520,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();
        } 


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •