SVG to Canvas path

by Rajesh Danabal

HTML

<canvas id="myCanvas" height=500 width=500 />

TypeScript

const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');

// Example SVG path data
const pathData = "M10 10 L100 100 C150 100 150 50 200 50 Z";

svgPathToCanvas(ctx, pathData);

function svgPathToCanvas(ctx: CanvasRenderingContext2D, pathData: string) {
    const commands = pathData.match(/[a-z][^a-z]*/ig) || []; // Split pathData into individual commands
    
    ctx.beginPath(); // Start the path

    commands.forEach(command => {
        const type = command[0];
        const args = command.slice(1).trim().split(/[\s,]+/).map(Number);

        switch (type) {
            case 'M': // Move to absolute
                ctx.moveTo(args[0], args[1]);
                break;
            case 'm': // Move to relative
                ctx.moveTo(ctx.currentX + args[0], ctx.currentY + args[1]);
                break;
            case 'L': // Line to absolute
                ctx.lineTo(args[0], args[1]);
                break;
            case 'l': // Line to relative
                ctx.lineTo(ctx.currentX + args[0], ctx.currentY + args[1]);
                break;
            case 'C': // Cubic Bezier absolute
                ctx.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]);
                break;
            case 'c': // Cubic Bezier relative
                ctx.bezierCurveTo(
                    ctx.currentX + args[0], ctx.currentY + args[1],
                    ctx.currentX + args[2], ctx.currentY + args[3],
                    ctx.currentX + args[4], ctx.currentY + args[5]
                );
                break;
            case 'Q': // Quadratic Bezier absolute
                ctx.quadraticCurveTo(args[0], args[1], args[2], args[3]);
                break;
            case 'q': // Quadratic Bezier relative
                ctx.quadraticCurveTo(
                    ctx.currentX + args[0], ctx.currentY + args[1],
                    ctx.currentX + args[2], ctx.currentY + args[3]
             ...