문제

해답 예

function onLoadBody() {
    var ctx = document.getElementById('canvas').getContext('2d'),
        img = new Image();
    img.src = "img/test1.png";
    img.onload = function() {
        var canvasAspect = ctx.canvas.width / ctx.canvas.height, // canvasのアスペクト比
            imgAspect = img.width / img.height, // 画像のアスペクト比
            left, top, width, height;

        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        if(imgAspect >= canvasAspect) {// 画像が横長
            left = 0;
            width = ctx.canvas.width;
            height = ctx.canvas.width / imgAspect;
            top = (ctx.canvas.height - height) / 2;
        } else {// 画像が縦長
            top = 0;
            height = ctx.canvas.height;
            width = ctx.canvas.height * imgAspect;
            left = (ctx.canvas.width - width) / 2;
        }
        ctx.drawImage(img, 0, 0, img.width, img.height, 
            left, top, width, height);
    };
}

해설