How to draw a transformed svg image onto the canvas RRS feed

  • 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);
         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?

    Thursday, December 20, 2012 1:51 PM

All replies

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

    Dave Paquette @Dave_Paquette www.davepaquette.com

    Thursday, December 20, 2012 5:45 PM
  • 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.
    Friday, December 21, 2012 3:07 AM