Question

I want to make a visualization with bezier curves connecting boxes. More important edges should be thicker. Every box has one output but many inputs. Therefore, I want to keep the thickness of the incomit edges constant (to save space) and alter only the thickness of the outgoing edges (of which there is only one per box).

This is why I want to draw bezier cureves with different thickness at each end. They shall be rendered on an HTML canvas element. I know context.bezierCurveTo() but that only allows one thickness of the curve.

Can anybody help me out?

Answer 1

suppose that you are drawing a curve, that is thick 2 times r at x1,y1 and controll-point 1 is in x-driection then you can do something like:

  canvas.fillStyle = "red";  

  canvas.beginPath();  
  canvas.moveTo(x1, y1-r);  
  canvas.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2);
  canvas.bezierCurveTo(cpx2, cpy2, cpx1, cpy1, x1, y1+r);
  canvas.lineTo(x1, y1+r);  
  canvas.fill();