canvas-rotate-translate.js

let img = new Image();
img.onload = function() {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');

    canvas.width = img.width;
    canvas.height = img.height;

    canvas.width = img.height;
    canvas.height = img.width;
    ctx.translate(img.height, 0);
    ctx.rotate(90 * Math.PI / 180);
    ctx.drawImage(this, 0, 0);

    document.body.appendChild(canvas);
}
img.src = 'https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg';

canvas width becomes img height and vice versa. at 90 degrees, the object will fall off the canvas, so we need to adjust the x (horizontal) axis of where the canvas should start. the context can be saved and then restored in case any other operation needs to be made afterwards.