0

hi guys i wanna have some leaves in this tree and that leaves should contain a text.may be on that branch or near to that.how to add canvas text inside a canvas tree.i have tried and researched for an answer i dint get any.if u have got any examples please help me out.My concept is that the company is root of tree and branches are their technologies and leaves as positions.Advance thanks for the answer.hope i get something soon.

 
<html>

<head>

<script type="text/javascript">

 window.onload = draw;
 
 function draw(){
   var canvas = document.getElementById('myCanvas');
   if (canvas.getContext){
     var context = canvas.getContext('2d');
     drawFractalTree(context); 
   }
   else{
     alert("HTML5 Canvas isn't supported by your browser!");
   }
 }

 function drawFractalTree(context){

  drawTree(context, 800, 800, -90, 11);
 }

 function drawTree(context, x1, y1, angle, depth){

  var BRANCH_LENGTH = random(0, 20);

  if (depth != 0){
   var x2 = x1 + (cos(angle) * depth * BRANCH_LENGTH);
   var y2 = y1 + (sin(angle) * depth * BRANCH_LENGTH);
   
   drawLine(context, x1, y1, x2, y2, depth);
   drawTree(context, x2, y2, angle - random(15,20), depth - 1);
   drawTree(context, x2, y2, angle + random(15,20), depth - 1);
  }
 }

 function drawLine(context, x1, y1, x2, y2, thickness){
  context.fillStyle   = '#000';
  if(thickness > 6) 
   context.strokeStyle = 'rgb(139,126, 102)'; //Brown  
  else
   context.strokeStyle = 'rgb(34,139,34)'; //Green

  context.lineWidth = thickness * 1.5;
  context.beginPath();

  context.moveTo(x1,y1);
  context.lineTo(x2, y2);

  context.closePath();
  context.stroke();
 }


 function cos (angle) {
  return Math.cos(deg_to_rad(angle));
 }

 function sin (angle) {
  return Math.sin(deg_to_rad(angle));
 }

 function deg_to_rad(angle){
  return angle*(Math.PI/180.0);
 }

 function random(min, max){
  return min + Math.floor(Math.random()*(max+1-min));
 }
  
</script>

<style type="text/css">
  canvas { border: 1px solid white; }
</style>

</head>

<body>
  <canvas id="myCanvas" width="1500" height="800"></canvas>
</body>

</html>
sudharsan
  • 53
  • 5
  • Possible duplicate of [How can I write text on a HTML5 canvas element?](http://stackoverflow.com/questions/3697615/how-can-i-write-text-on-a-html5-canvas-element) – ale Aug 22 '16 at 10:04
  • see my question properly i dint ask about adding a canvas text normally i need text to be done in another canvas drawing of its coordinates. – sudharsan Aug 22 '16 at 10:18
  • You haven't coded leaves & branch text, so here's a start: **Leaves:** 1. Calculate an extended [x,y] beyond the branch you want to attach a leaf upon (use similar trigonometry that you're already using when calculating x2,y2). 2. Draw a leaf around that [x,y] (whatever leaf style your design requires), 3. Draw text at the extended [x,y]: `ctx.textAlign=center; ctx.textBaseline='middle'; ctx.fillText('Hello',x,y);` **Branches:** 1. Find the centerpoint of the branch (more of the same trig). 2. `ctx.translate(centerX,centerY)`, 2. `ctx.rotate(thisBranchAngle)`, 3. `ctx.fillText('Hello',0,0)` – markE Aug 22 '16 at 20:14

0 Answers0