JSFiddle - React, Tailwind, and code Playground

by Posture

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Pattern Fill in Canvas</title>

		<!-- jQuery -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<!-- jQuery UI 1.11.4 -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


		<!-- Highcharts -->
		<script src="https://code.highcharts.com/stock/highstock.js"></script>

		<script src="https://code.highcharts.com/stock/modules/data.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		<script src="https://code.highcharts.com/modules/export-data.js"></script>
		<script src="https://code.highcharts.com/modules/accessibility.js"></script>
		<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

		<!-- Canvg -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>

	</head>
	<body>

		<br>
		<div style="background-color: #ffffff;">
			<div id="graf-teste" style="min-width: 80%; height: 200px; max-width: 100%; margin: 0 auto"></div>
			<button id='btn_capt'>Capturar Gráfico</button>
		</div>

		<script type="text/javascript">
			var redrawEnabled = true,
			ctr = 0;
			ctr1 = 1;

			Highcharts.chart('graf-teste', {
			// $('#graf-teste').highcharts({
			  chart: {
			    events: {
			      render: function() {
			        if (redrawEnabled) {
			          redrawEnabled = false;
			          var chart = this,
			            renderer = chart.renderer;
			          
			          chart.series[0].points.forEach(function(p) {
			          	console.log(p);
			          
			            var widthRatio = p.shapeArgs.width / p.shapeArgs.height,
			              id = 'pattern-' + p.index + '-' + ctr;

			            var pattern =...