SVG path to points

by realhunts

HTML

<svg width="200" height="200" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path id="path" fill="#000000" fill-opacity="0.996078431372549" stroke="none" d="
M 94.75 70.2
Q 89.1 68.45 82.7 67.5 81.7 70 80.75 72.55 78.75 77.9 76.95 83.35 75.2 83.35 73.5 83.4 66.5 83.7 61.1 85.55 59.15 82.8 57.25 80.1 54.15 75.85 51.05 71.7 48.2 72.65 45.7 73.95 44.15 74.65 42.7 75.45 37.95 78.1 34.15 81.6 35.25 84.2 36.45 86.8 38.8 91.8 41.15 96.75 40.15 97.9 39.05 98.95 38.35 99.75 37.65 100.5 34.1 104.25 31.75 109.25 29.6 108.85 27.4 108.45 21.15 107.25 14.85 106.55 14.2 108.05 13.55 109.55 12.9 111.15 12.5 112.85 10.9 118.6 10.05 125.1 10.05 125.25 10.05 125.45
L 10.05 125.5
Q 15.3 127.55 20.55 129.55 23.1 130.55 25.6 131.55 25.6 138.85 27.15 144.7 27.5 146.05 27.9 147.4 23.6 150.35 19.4 153.45 16.85 155.3 14.3 157.2 16.3 162.5 19.1 167 21.4 170.7 24.1 174.1 29.25 171.95 34.15 169.6 36.85 168.3 39.6 167.15 43.2 170.85 47.65 173.65 49.8 174.95 51.8 176.3 50.7 182.55 49.75 188.95 49.45 190.9 49.25 192.95 54.25 195.25 60.25 196.6 63.9 197.4 67.75 198 67.9 198.05 68 198 68.05 198 68.1 198 69.15 195.3 70.15 192.65 72.2 187.35 74.15 182.05 75.5 181.9 77.1 181.85 84.25 181.8 89.55 179.75 91.6 182.4 93.6 185.2 96.6 189.55 99.65 193.8 101.65 192.65 103.85 191.7 105.9 190.75 107.9 189.55 112.45 186.95 116.5 183.55 115.3 180.8 114.05 178.05 111.75 173.05 109.45 168.05 110.95 166.6 112.3 165 115.75 161.05 118.25 156.3 120.55 156.6 122.65 156.95 129.1 158.05 135.15 159 136.6 155.7 137.75 152.1 139.5 146.65 140.15 139.95 137.6 138.9 135 137.95 129.65 135.9 124.35 134 124.35 132.65 124.3 131.3 124 124.3 122.35 118.6 125.1 116.75 127.75 114.8 132 111.7 136.15 108.6 134.45 104.2 132.2 100.4 129.55 95.7 126.1 91.85 123.4 92.9 120.85 94.05 115.8 96.4 110.9 98.8
L 110.85 98.8
Q 108.25 96.1 105.35 93.75 105.3 93.75 105.3 93.7 103.3 92.15 100.95 90.95 100.95 90.9 100.9 90.9 100 90.2 99.1 89.55 99.3 87.55 99.7 85.3 100.7 79.1 101.6 72.65 98.25 71.35 94.75 70.2
M 61.2...

JavaScript

var canvas = document.getElementById("canvas");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext("2d");

var path = document.getElementById('path');
var NUM_POINTS = 6;
for ( var i=0,l=NUM_POINTS; i<l; i++ ){
	var point = path.getPointAtLength(i * len / (NUM_POINTS-1));
  //path.getPointAtLength( i/l * path.getTotalLength() );
  console.log(point)
  ctx.fillRect(point.x, point.y,2,2); // 
}

/*

var path = document.getElementById("test");
var len = path.getTotalLength();
var points = [];

for (var i=0; i < NUM_POINTS; i++) {
    var pt = path.getPointAtLength(i * len / (NUM_POINTS-1));
    points.push([pt.x, pt.y]);
}
*/