Canvas HTML画布最小图像大小调整会导致图像失真

我有一个html画布，上面有调整大小的图像。图像的大小从10%调整到40%，这应该不会像调整图像大小超过50%那样有问题

然而，这一形象最终被扭曲了

为了便于解释，上面的图像放大了几倍

第一个图像是调整大小的结果，第二个是图像的外观。我的第一个想法是创建SVG图像，但如果不调整大小，它们甚至不会显示正确的图像。我想canvas不能很好地支持SVG

我创建了jsfidle示例（注意左上角）

是否有任何方法可以正确调整图像大小，或者我应该在photoshop中为每个图像调整大小

    var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

// širina canvasa
 ctx.canvas.width  = window.innerWidth-23;
 ctx.canvas.height = 80;


ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle="#b0b0b0";
ctx.fill();

  // resized image - wwrong
  var imgorg = new Image();
    imgorg.onload = function() {
    ctx.drawImage(imgorg,0, 10,30,30);
    }
     imgorg.src = 'http://vetercek.com/master3/img/vanish/50/v0.png';

// how the image should look like
  var imgorg2 = new Image();
    imgorg2.onload = function() {
    ctx.drawImage(imgorg2,0, 30);
    }
     imgorg2.src = 'http://vetercek.com/master3/img/vanish/30/v0.png';

 // SVG sample without resize   - also wrong
  var imgorg3 = new Image();
    imgorg3.onload = function() {
    ctx.drawImage(imgorg3,0, 60);
    }
     imgorg3.src = 'http://vetercek.com/master3/img/vanish/30/v0.svg';  

---

事实证明，在画布上绘制对象是正确的选择。它可以动态地“调整大小”，因此没有质量损失。对象首先绘制到隐藏的画布上，然后绘制到可见的画布上

---

画布使用GPU渲染图像。当您放大（或缩小）时，它将创建工件。这是不可避免的，像素是离散的单位，你不能让一个像素适合一个半像素，而不做一些近似它应该是什么样子。即使不通过画布，你的图像对我来说也不一样（不是相同数量的黑线），你们的svg版本只是两条平行线。谢谢你们的回答@凯伊多：图像应该是一样的。我从svg创建了png。但你是对的，中间只有两条黑线和一条白线。如果我在那里创建另一个画布绘制图像，保存它并稍后恢复它，会怎么样？它能正常工作吗？我用JSF绘制了这个对象

//magnification
var pov=0.2;

// znak1
var canvasPattern = document.createElement("canvas");
canvasPattern.width = 200*pov;canvasPattern.height = 200*pov;
var contextPattern = canvasPattern.getContext("2d");

// sign1
contextPattern.beginPath();
contextPattern.moveTo(95*pov,61.5*pov); contextPattern.lineTo(95*pov,138.5*pov);contextPattern.closePath();
contextPattern.lineWidth=2*pov;contextPattern.strokeStyle = 'black';contextPattern.stroke();
contextPattern.beginPath();
contextPattern.moveTo(98*pov,61.5*pov); contextPattern.lineTo(98*pov,138.5*pov);contextPattern.closePath();
contextPattern.lineWidth=4*pov;contextPattern.strokeStyle = 'white';contextPattern.stroke(); contextPattern.beginPath();
contextPattern.moveTo(100*pov,61.5*pov);contextPattern.lineTo(100*pov,138.5*pov);contextPattern.closePath();
contextPattern.lineWidth=2*pov;contextPattern.strokeStyle = 'black';contextPattern.stroke();


var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

// širina canvasa
 ctx.canvas.width  = window.innerWidth-23;
 ctx.canvas.height = 80;


ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.fillStyle="#808080";
ctx.fill();


ctx.drawImage(canvasPattern,30, 30);