Example

by Mark Beharrell

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas -->

<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="dxc dxc-chart" direction="ltr" fill="none" stroke="none" stroke-width="0" style="line-height:normal;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);display:block;overflow:hidden;touch-action:pan-x pan-y pinch-zoom;-ms-touch-action:pan-x pan-y pinch-zoom;" width="600" height="325" onclick="void(0)"><rect x="0" y="0" width="600" height="325" transform="translate(0,0)" fill="gray" opacity="0.0001"></rect><defs><clipPath id="DevExpress_1"><rect x="0" y="0" width="600" height="325" transform="translate(0,0)"></rect></clipPath><pattern id="DevExpress_2" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#0099cc" opacity="0.75"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#0099cc"></path></pattern><pattern id="DevExpress_3" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#0099cc" opacity="0.5"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#0099cc"></path></pattern><pattern id="DevExpress_4" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#f15f35" opacity="0.75"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#f15f35"></path></pattern><pattern id="DevExpress_5" width="6" height="6" patternUnits="userSpaceOnUse"><rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="#f15f35" opacity="0.5"></rect><path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="#f15f35"></path></pattern><clipPath id="DevExpress_6"><rect x="93" y="11" width="507" height="278" transform="translate(0,0)"></rect></clipPath><clipPath id="DevExpress_7"><rect...