将图像绘制为固定的画布宽度和高度

Question

If the source svg is in a responsive environment , how do I use drawImage() to draw a to a given canvas size?

Example: How do I get the svg drawn to a 412.5 x 487.5 canvas, if the original svg is 550 x 650 and it is being viewed on a mobile device (so obviously the svg will be seen smaller than the original size)?

Fiddle

svgToImage(svg2, function(img2){
        ctx2.drawImage(img2, 0, 0);
      });

      function svgToImage(svg2, callback) {
        var nurl = "data:image/svg+xml;utf8," + encodeURIComponent(svg2),
            img2 = new Image;

          img2.onload = function() {
             callback(img2);
          }
          img2.src = nurl;
      }

Answer 1

When you SVG has loaded, simply set the canvas size, then draw in the image using the width and height arguments of drawImage.

Note that a bitmap can only take integer values so your canvas has to be either 413x488 or 412x487. If you don't set the canvas size it will default to 300x150 and then stretch to the size you use for style/CSS:

  svgToImage(svg2, function(img2){
      ctx2.canvas.width = 413;               // set canvas size
      ctx2.canvas.height = 488;
      ctx2.drawImage(img2, 0, 0, 413, 488);  // draw SVG/image at same size
  });

Updated fiddle