Strange line with context.stroke()

mdagis · #1 (**permalink**) 12-14-11, 08:43 AM

Hello, I am quite a newby on HTML 5 and I tried to paly around with the graphics.

I have made a method drawTree that creates trees and it consists from 2 other methods : the drawBranches for the upper part and drawHead for the lower part. The problem is that when I call both the methods drawBranches & drawHead, a strange line at the upper left part is created. When I call each of these methods separetly the strange line does not apear.

Here is the code:

Code:

<!DOCTYPE HTML>
<html>
<head>
<script>

function drawHead(context, startX, startY){

		context.lineCap = "round";
		context.lineWidth = 20 + 10;

		context.strokeStyle = "saddlebrown";

		context.moveTo(startX, startY);

		context.lineTo(startX, startY + 70);

		//context.fillStyle   = '#00f';
		//alert("before")
		context.stroke();
		//alert("after")

}

function drawBranches(context, startX, startY, trunkWidth, level){
if (level < 12) {
	
	var changeX = 100 / (level + 1);
	var changeY = 200 / (level + 1);
	
	var topRightX = startX + Math.random() * changeX;
	var topRightY = startY - Math.random() * changeY;
	
	var topLeftX = startX - Math.random() * changeX;
	var topLeftY = startY - Math.random() * changeY;
	
	
	// draw right branch
	context.beginPath();
	context.moveTo(startX + trunkWidth / 4, startY);
	context.quadraticCurveTo(startX + trunkWidth / 4, startY - trunkWidth, topRightX, topRightY);
	context.lineWidth = trunkWidth;
	context.lineCap = "round";
	if (level < 5)
  {
		//context.strokeStyle = "rgb(128,0,128)";
		context.strokeStyle = "saddlebrown";
  }
  else
  {
	  context.strokeStyle = "olive";
  }
	//context.strokeStyle = "green";
	context.stroke();
	
	
	// draw left branch
	context.beginPath();
	context.moveTo(startX - trunkWidth / 4, startY);
	context.quadraticCurveTo(startX - trunkWidth / 4, startY - trunkWidth, topLeftX, topLeftY);
	context.lineWidth = trunkWidth;
	context.lineCap = "round";
	context.stroke();
	
	
	drawBranches(context, topRightX, topRightY, trunkWidth * 0.7, level + 1);
	drawBranches(context, topLeftX, topLeftY, trunkWidth * 0.7, level + 1);


	}

	
}

window.onload = function(){
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");

//drawHead(context, 200, canvas.height - 100)
//drawBranches(context, 200, canvas.height - 100, 20, 0);

drawTree(context, 200, canvas.height - 100, 20, 0);
drawTree(context, 600, canvas.height - 100, 20, 0);
drawTree(context, 900, canvas.height - 100, 20, 0);


//drawBranches(context, 600, canvas.height - 100, 20, 0);

};

function drawTree(context, startX, startY, trunkWidth, level){
	//drawHead(context, 200, canvas.height - 100)
	//drawBranches(context, 200, canvas.height - 100, 20, 0);

	drawBranches(context, startX, startY, 20, 0);
	
	drawHead(context, startX, startY);

};

</script>
</head>
<body>
<canvas id="myCanvas" width="1100" height="800" style="border:0px solid black;">
</canvas>
</body>
</html>

alxkls · #2 (**permalink**) 12-16-11, 07:39 AM

by the looks of it you've used the same name for separate variables somewhere cause if you do this:

Code:

window.onload = function(){
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");

drawHead(context, 200, canvas.height - 100)
drawHead(context, 600, canvas.height - 100)
drawHead(context, 900, canvas.height - 100)
//drawBranches(context, 200, canvas.height - 100, 20, 0);

drawTree(context, 200, canvas.height - 100, 20, 0);
drawTree(context, 600, canvas.height - 100, 20, 0);
drawTree(context, 900, canvas.height - 100, 20, 0);


//drawBranches(context, 600, canvas.height - 100, 20, 0);

};

function drawTree(context, startX, startY, trunkWidth, level){
	//drawHead(context, 200, canvas.height - 100)
	//drawBranches(context, 200, canvas.height - 100, 20, 0);

	drawBranches(context, startX, startY, 20, 0);
	
	//drawHead(context, startX, startY);

};

it works fine. also if you do this:

Code:

function drawTree(context, startX, startY, trunkWidth, level){
	//drawHead(context, 200, canvas.height - 100)
	//drawBranches(context, 200, canvas.height - 100, 20, 0);
	drawHead(context, startX, startY);
	drawBranches(context, startX, startY, 20, 0);
	
	//

};

.....