How to draw a transformed svg image onto the canvas

Question

I'm now trying to draw a SVG image on to the html canvas, it is easy to do this when the SVG doesn't been transformed(translate/rotate):

image = new Image();
image.src = "data:image/svg+xml;base64," +btoa(svgString);
setImmediate(
     function () {
         context.drawImage(image, 0,0);
                            
              }
    );

,but it become weird when transform the svg image:

if the svg image is 100x100, the the part tranlated outof this range will be cut when they are draw on the image.

How can I fix it?

Answer 1

Have you tried applying the translation after the image is drawn?

---

Dave Paquette @Dave_Paquette www.davepaquette.com

Answer 2

You mean after drawing on the canvas, then  transform the image on the canvas? Er ,I think it's hard, because the transform to the SVG is generated by the transform matrix, and I don't know how to map the transform matrix to the bitmap canvas.