キャンバスで画像をリサイズ

Question

[送信]ボタンをクリックした後、画像のサイズをmmからピクセルに変更しようとしていますが、達成できるのは元の画像を切り抜くことだけです。キャンバスがサイズを変更した後にイメージをリフレッシュしていないように見えます。どうやってそれを正しくすることができますか？ jsfiddle

JSコードに

例：

document.addEventListener("DOMContentLoaded", function() { 
    var width = 0; 
    var height = 0; 
    var colors = 0; 
    var order = 0; 

var canvas = document.getElementById('project'); 
var context = canvas.getContext('2d'); 
var logo = document.getElementById('logo'); 

logo.onload = function() { 
    canvas.width = logo.width; 
    canvas.height = logo.height; 

    context.drawImage(logo, 0, 0); 
}; 

document.getElementById("btn_sub").addEventListener("click", function(event) { 
    event.preventDefault(); 

    width = document.getElementById("form1").elements[0].value; 
    height = document.getElementById("form1").elements[1].value; 
    colors = document.getElementById("form1").elements[2].value; 
    order = document.getElementById("form1").elements[3].value; 

    logo.width = (width * 118)/25.4; 
    logo.height = (height * 118)/25.4; 

    canvas.width = (width * 118)/25.4; 
    canvas.height = (height * 118)/25.4; 

    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.drawImage(logo, 0, 0); 

Answer 1

はのdrawImage関数を考慮に画像要素の幅と高さを取っていません。この作業を行うには、drawImage関数context.drawImage(img,x,y,width,height)のこのオーバーロードを使用できます。

この例のように、context.drawImage(logo, 0, 0, logo.width, logo.height)。