Lets say I have an svg,

<svg viewBox="188.1601 295.929 33.6399 36" width="33.6399" height="36" xmlns="http://www.w3.org/2000/svg"> <path fill="#744EAA" d="M 192.8 299.929 C 195.8 299.929 197.8 301.929 200.8 305.929 C 203.8 309.929 208.757 313.12 212.8 313.929 C 217.8 314.929 221.8 318.929 221.8 324.929 C 221.8 329.826 217.954 331.929 212.8 331.929 C 207.8 331.929 203.8 328.929 198.8 323.929 C 193.8 318.929 188.8 309.929 188.8 305.929 C 188.8 301.929 189.8 299.929 192.8 299.929 Z" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)"/> <path fill="#77B255" d="M 190.315 295.929 C 191.563 295.929 191.563 297.177 191.563 298.424 C 191.563 300.188 192.811 299.553 194.059 299.553 C 195.305 299.553 197.8 301.929 197.8 301.929 L 194.058 301.929 C 192.81 301.929 194.058 304.543 192.81 304.543 C 191.562 304.543 191.562 303.355 190.315 303.355 C 189.068 303.355 188.8 306.929 188.8 306.929 C 188.8 306.929 187.196 302.776 189.067 300.905 C 190.315 299.657 187.82 295.929 190.315 295.929 Z" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)"/> </svg>

and I want to convert it to ctx commands so it can be rendered on a 2D Canvas game. Here is an example of what I have:

// body
 ctx.fillStyle = '#ffe763';
 ctx.strokeStyle = '#a29442';
 ctx.beginPath();
 const pos = offset(this.renderX, this.renderY);
 ctx.arc(pos.x, pos.y, this.r, 0, Math.PI * 2);
 ctx.stroke();
 ctx.fill();
 ctx.closePath();

I tried to find an online converter but they just rendered something at the top left of my screen in low quality.