Home/ Questions/Q 8072551
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T14:03:07+00:00

I want to draw a pipe/tube using the HTML5 canvas along a set of

  • 0

I want to draw a pipe/tube using the HTML5 canvas along a set of points.I tried is drawing gradient lines so that it would look like a pipe, gradient at the bends is not continuous.

When putting the Composition operation as XOR, it’s somewhat OK, but not that good.

var MIDDILE_COLOR = "#ffffff";
var LINE_WIDTH = 20;
window.onload = function() {
  try {
    var context = document.getElementById("abc").getContext("2d");
    var points = [
      [90, 136],
      [101, 21],
      [101, 21],
      [376, 133],
      [100, 300]
    ];
    drawConnectionPipe(context, points, 10, "#ff0000");
  } catch (e) {
    alert(e);
  }

}

function drawConnectionPipe(ctx, coorinateArray, thickness, gradColor) {
  try {

    ctx.save();

    var gradientObject = null;
    //ctx.globalCompositeOperation = 'xor';
    for (var i = 0; i < coorinateArray.length - 1; i++) {
      var startPt = coorinateArray[i];
      var endPt = coorinateArray[i + 1];

      var arr = getPerpendicularPoints(startPt[0], startPt[1], endPt[0], endPt[1]);
      gradientObject = ctx.createLinearGradient(arr[0], arr[1], arr[2], arr[3]);

      gradientObject.addColorStop(0, gradColor);
      gradientObject.addColorStop(0.5, MIDDILE_COLOR);
      gradientObject.addColorStop(1, gradColor);
      ctx.lineWidth = thickness;
      ctx.strokeStyle = gradientObject;
      ctx.lineJoin = "round";

      ctx.beginPath();
      ctx.moveTo(startPt[0], startPt[1]);
      ctx.lineTo(endPt[0], endPt[1]);
      ctx.closePath();
      ctx.stroke();


      //ctx.globalCompositeOperation = 'source-over';

    }

    ctx.restore();
  } catch (e) {
    alert(e);
  }
}

function getPerpendicularPoints(x1, y1, x2, y2) {
  var slantAngle = 0;
  var slant = (x1 - y1) / (x2 - y2);
  slantAngle = Math.PI / 2 - Math.atan2(y2 - y1, x2 - x1);
  var originX = (x1 + x2) / 2;
  var originY = (y1 + y2) / 2;

  var halfDistance = LINE_WIDTH / 2;

  var perpX1 = originX + halfDistance * Math.sin(90 * Math.PI / 180 - slantAngle);
  var perpY1 = originY + halfDistance * -Math.cos(90 * Math.PI / 180 - slantAngle);

  var perpX2 = originX + halfDistance * Math.sin(270 * Math.PI / 180 - slantAngle);
  var perpY2 = originY + halfDistance * -Math.cos(270 * Math.PI / 180 - slantAngle);

  return [perpX1, perpY1, perpX2, perpY2];

}

function getNormalizedAtan2(ydiff, xdiff) {
  var atan2Res = Math.atan2(ydiff, xdiff);
  if (atan2Res < 0) {
    atan2Res += (2 * Math.PI)
  }

  return atan2Res;
}
<html>

<head>
  <title>Raphael Play</title>
</head>

<body>

  <canvas id="abc" width="500" height="500"></canvas>

</body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Finally I implemented it using svg filters. In html5 canvas its very difficult to create such illuminations.

    • 0