webRTCで取得した画像をcanvas.rotateで回転させて保存したい

Question

webRTCを利用してsafariを介してスマホから画像を取得したいと思っています。
webRTCでスマホカメラにアクセス出来てもフレームワーク（width, height)を変更することは出来ないようです（テレビでスマホ映像をデフォルトのサイズで縦長に放送しているのもそのためなのかも知れません）。しかし、画像サイズは16:9や4:3の横長サイズで保存したい。

そこでcanvas.rotateで90度回転させてcanvas.drawImageすることにしました。
しかし、canvas.rotateは回転実行中にcanvasタグのサイズが小さいと画像が切れしまうようで大きめのタグサイズにする必要があります（下の画像）。

スマホサイズ（360:640）を回転させる十分なサイズがそのまま空白として残ってしまいます。これをなんとかしたい。

###自分なりの対応策
単純にcssでwidth heightを変更する。
setAttributeの属性を組み合わせてサイズ変更を試したものの変更できず。
＜例＞

$("#start").click(function() {
		if (video.srcObject) {
			var canvas = document.getElementById('canvas');
			//canvasの描画モードを2dに
			var ctx = canvas.getContext('2d');
			ctx.translate(640, 0);
			ctx.rotate(90/180*Math.PI);
			// canvasにコピー
			ctx.drawImage(video, 0, 0, 360, 640);
            //seAttributeで後付けで変更
            var w = 640;  
			var h = 360;
			canvas.setAttribute("width", w);
			canvas.setAttribute("height", h);
			
		}
	});

.canvas {
      width: 1000px;
      height: 640px;
}

画像を切り取るcanvas.getImageData,canvas.putImageDataメソッドがあったので利用してみた。
同一document内（下記のctx）では切り取れるがフレームを再設定したタグ内（下記のctx2）に貼り付けると貼り付けられるものの画像サイズが指定通りにならずに引き伸ばされた画像になってしまいます。このような使い方は検索した限りなかったのでどう対処すれば良いか分からないのが現状です。

$("#start").click(function() {
		if (video.srcObject) {
			var canvas = document.getElementById('canvas');
			var canvas2 = document.getElementById('canvas2');
			//canvasの描画モードを2dに
			var ctx = canvas.getContext('2d');
			var ctx2 = canvas2.getContext('2d');
			var w = 1000;
			var h = 640;
			// 同じサイズをcanvasに指定
			canvas.setAttribute("width", w);
			canvas.setAttribute("height", h);
			ctx.translate(640, 0);
			ctx.rotate(90/180*Math.PI);
			// canvasにコピー
			ctx.drawImage(video, 0, 0, 360, 640);
			imagedata = ctx.getImageData(0, 0, 360, 640);
			//ctx2にctxで切り取った画像を貼り付け
			ctx2.putImageData(imagedata, 0, 0);
			
		}
	});

#canvas2 {

      width: 640px;
      height: 360px;
}

以上のようにスマホカメラの縦長画像を普通の写真画像のように横長サイズにする場合、canvas.rotateが良いと考えましたが、上手くいっておりません。
何かお知恵を拝借できればと思い、投稿いたしました。
よろしくお願いします。

Answer 1

自己解決しました。

上記のようなcanvas.rotateで縦長を横長にする手法以外に当てにできる方法は見つからなかった。
ctx2のsetAttributeを改めて設定する（css canvas2 width,heightではなく）

canvas2.setAttribute("width", 360);
canvas2.setAttribute("height", 640);

これで正常に貼り付けられる。但し、何故なのかは分からない。