SVG path test data with absolute and relative commands

svg-test-path-data.js

// Intend: create a shape with all available SVG path commands.
// Result: two shapes, one with absolute commands only, the second with relative commands only.
// Aim: test my SVG path transform algorithm if it works (scale and translate).

var drawScalingTestPath = function() {
		// Define a shape with SVG path data attributes only with _absolute_
		// path commands.
		var svgDataAbsolute = [
		    'M', -10, -7.5,
		    'V', -10, 
		    'L', 0, -10,
		    'C', -5, -15, 10, -15, 5, -10,
		    'H', 10,
		    'C', 5, -7.5, 5, -7.5, 10, -5,
		    'S', 15, 0, 10, 0,
		    'Q', 5, 5, 0, 0,
		    'T', -10, 0,
		    'A', 5, 4, 0, 1, 1, -10, -5,    
		    'Z'
		];
		// Print and draw on the canvas.
		console.log('svgTestData', svgDataAbsolute );	
		drawutilssvg.transformPathData( svgDataAbsolute, pb.draw.offset, pb.draw.scale );
		pb.draw.ctx.strokeStyle = 'rgb(255,0,0)';
		pb.draw.ctx.lineWidth = 2;
		pb.draw.ctx.stroke( new Path2D(svgDataAbsolute.join(" ")) );

		// Now define the same shape. But only y with _relative_
		// path commands.
		var svgDataRelative = [
		    'M', -10, -7.5,
		    'v', -2.5, 
		    'l', 10, 0,
		    'c', -5, -5, 10, -5, 5, 0,
		    'h', 5,
		    'c', -5, 2.5, -5, 2.5, 0, 5,
		    's', 5, 5, 0, 5,
		    'q', -5, 5, -10, 0,
		    't', -10, 0,
		    'a', 5, 4, 0, 1, 1, 0, -5,    
		    'z'
		];
		// Print and draw on the canvas (and move 25 units to see them better)
		console.log('svgTestDataRelative', svgDataRelative );
		drawutilssvg.transformPathData( svgDataRelative, {x:25,y:0}, {x:1,y:1} );
		drawutilssvg.transformPathData( svgDataRelative, pb.draw.offset, pb.draw.scale );
		pb.draw.ctx.strokeStyle = 'rgb(0,255,0)';
		pb.draw.ctx.lineWidth = 2;
		pb.draw.ctx.stroke( new Path2D(svgDataRelative.join(" ")) );
};

The shape(s) look like this: