HTML5 Canvasで画像のアスペクト比を保持したままリサイズする方法

アスペクト比を保持しながらリサイズするためのCSSを使用する方法:

<style>
    .canvas-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%; /* 画像のアスペクト比に合わせて調整 */
    }
    canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div class="canvas-container">
    <canvas id="myCanvas"></canvas>
</div>
<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var image = new Image();
    image.onload = function() {
        var aspectRatio = image.width / image.height;
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetWidth / aspectRatio;
        context.drawImage(image, 0, 0, canvas.width, canvas.height);
    };
    image.src = "path/to/your/image.jpg";
</script>

アスペクト比を保持しながらリサイズするためのJavaScriptを使用する方法:

これらの例では、Canvas要素を使って画像をリサイズし、アスペクト比を保持します。最初の例では、CSSのパディングを使用してアスペクト比を調整し、二番目の例ではJavaScriptの条件分岐を使用して最大幅と最大高さを超えないようにリサイズしています。

これらの方法を使って、HTML5 Canvasで画像のアスペクト比を保持しながらリサイズすることができます。適宜、自分のプロジェクトに合わせてコードを調整してください。