...

View Full Version : 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



<!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 (http://inkscape.org/index.php?lang=en)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
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?


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();
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum