アップロードされた画像の塗りつぶしのキャンバスJavascript

Question

キャンバスのサイズを画像のサイズに設定して、アップロードした画像をキャンバスのサイズに合わせたいと思っています。キャンバスのサイズは正しく設定されていますが、イメージは小さくなり、キャンバスを塗りつぶしません。どのようにイメージをキャンバスに塗りつぶすことができますか？これまで私が試したことはここにあります。

<canvas id="canvas" style="border: 1px solid #000; width: 400px; height: 300px"></canvas> 
<input type="file" name="photo" id="image" accept="image/*"> 

JS

var image = document.getElementById('image'); 
var canvas = document.getElementById('canvas'); 
var canvasWidth = 400; 
var canvasHeight = 300; 

if (image) { 
    image.addEventListener('change', function() { 
     var context = canvas.getContext('2d'); 
     if (this.files && this.files[0]) { 
      var fr = new FileReader(); 
      fr.onload = function (ev) { 
       var img = new Image(); 
       img.onload = function() { 
        canvasWidth = img.width; 
        canvasHeight = img.height; 
        canvas.style.width = canvasWidth + 'px'; 
        canvas.style.height = canvasHeight + 'px'; 
        context.drawImage(img, 0, 0); 
       }; 
       img.src = ev.target.result; 
      }; 
      fr.readAsDataURL(this.files[0]); 
     } 
    }, false); 
} 

Answer 1

  var image = document.getElementById('image'); 
var canvas = document.getElementById('canvas'); 
var canvasWidth = 400; 
var canvasHeight = 300; 

if (image) { 
image.addEventListener('change', function() { 
var context = canvas.getContext('2d'); 
if (this.files && this.files[0]) { 
var fr = new FileReader(); 
fr.onload = function (ev) { 
var img = new Image(); 
img.onload = function() { 
canvasWidth = img.naturalWidth; 
canvasHeight = img.naturalHeight; 
canvas.width = canvasWidth; 
canvas.height = canvasHeight; 
context.drawImage(img, 0, 0, canvasWidth, canvasHeight); 
}; 
img.src = ev.target.result; 
}; 
fr.readAsDataURL(this.files[0]); 
} 
}, false);} 

ここ

あなたは "私はイメージがキャンバスを埋めることができます_How _？"

<canvas id="canvas" width="400" height="300" style="border:1px solid red"></canvas> 
<input type="file" name="photo" id="image" accept="image/*">