Intersection between splines - CanvasJS JavaScript Charts

Intersection between splines - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{        
	data: [
	{
		type: "spline",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 28 },
			{ x: 80, y: 34 },
			{ x: 90, y: 14 }
		]
	},{
		type: "spline",
		dataPoints: [
			{ x: 10, y: 21 },
			{ x: 20, y: 55 },
			{ x: 30, y: 70 },
			{ x: 40, y: 75 },
			{ x: 50, y: 45 },
			{ x: 60, y: 48 },
			{ x: 70, y: 128 },
			{ x: 80, y: 94 },
			{ x: 90, y: 114 }
		]
	}					
	]
});

chart.render();
console.log(getIntersectionPointsBetweenTwoLines(chart));


function getIntersectionPointsBetweenTwoLines(chart) {
//This method renders chart twice:
//	Once with first dataSeries & other elements as transparent
//	and again with second dataSeries & other elements as transparent
//and compare them to find intersecting pixels

  if (!chart.options.data || chart.options.data.length < 2) {
    console.log("chart don't have enough dataSeries");
    return;
  }
  var div = document.createElement('div');
  div.setAttribute("id", "hiddenContainer");
  div.setAttribute("style", "height:" + chart.height + "px; width:" + chart.width + "px;");
  document.body.appendChild(div);

  var chart1 = new CanvasJS.Chart("hiddenContainer", {
    backgroundColor: "transparent",
    interactivityEnabled: false,
    axisX: {
      lineColor: "transparent",
      gridColor: "transparent",
      tickColor: "transparent",
      labelFontColor: "transparent"
    },
    axisY: {
      lineColor: "transparent",
      gridColor: "transparent",
      tickColor: "transparent",
      labelFontColor: "transparent"
    },
    data: [{
      type: chart.data[0].type,
      color: "rgba(255,0,0,1)",
      dataPoints: chart.data[0].dataPoints
    }, {
      type: chart.data[1].type,
      color: "rgba(0,0,0,0)",
      dataPoints: chart.data[1].dataPoints
    }]
  });

  chart1.render();

  var ds1 = chart1.ctx.getImageData(chart1.plotArea.x1,...