端末の回転時にcanvasをレスポンシブルにしたい

現在、javascriptとHTMLを用いて
スマートフォンで再生されるプレイアブル広告を作成しています
出稿規定にレスポンシブル対応とあり、画面の回転時にレイアウトを綺麗に表示しなおしたいのですが
下記の「発生している問題」のようなことが起こってしまいます
いろいろと試してみましたが解決には至らなかったので
お力を貸していただけたらと思います

発生している問題

Google Chromeのデベロッパーツールでテストしています

横→縦
全体的に下になり、上に余白が発生している

縦→横
canvasサイズは変わっているが表示されている領域が縦のままになっていて
左端しか表示されない

該当のソースコード

抜粋して書いています

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="UTF-8">
5	<meta name="ad.size" content="width=320,height=480">
6	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
7	<meta http-equiv="Content-Security-Policy" content="frame-src 'self' blob: ">
8	<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
9	<title>APP</title>
10	<script>
11	
12	// js等の読み込み
13	
14	</script>
15	<style>
16		html, body{
17			overflow: hidden;
18		}
19	</style>
20</head>
21<body style="margin:0px;background-color:#000000;" id="body">
22<div id ="stats_waku" style=""></div>
23<div id="animation_container" style="background-color:rgba(255, 204, 204, 1.00); width:auto; height:auto">
24	<canvas id="canvas" width="640" height="1120" style="position: absolute; display: block; background-color:#000000;"></canvas>
25</div>
26</body>
27</html>

javascript
1    _init(){
2        window.addEventListener('resize', this.checkOrientation.bind(this), false);
3    }
4
5    checkOrientation (e) {
6        if('orientation' in window) {
7            // defaultOrientationがtrueの場合、window.orientationが0か180の時は縦長
8            // defaultOrientationがfalseの場合、window.orientationが-90か90の時は縦長
9            var o = (window.orientation % 180 == 0);
10            if((o && this.defaultOrientation) || !(o || this.defaultOrientation)) {
11                console.log('portrait');
12                this.windowInit("portrait");
13            }
14            else {
15                console.log('landscape');
16                this.windowInit("landscape");
17            }
18        }
19    }
20
21    windowInit(muki){
22
23        // 初期リセット
24        window.innerW = window.innerWidth;
25        window.innerH = window.innerHeight;
26        main.displayWidth = 640;
27        main.displayHeight = 1120;
28        main.canvas.width = 640;
29        main.canvas.height = 1120;
30        main.canvas.style.height = "";
31        main.canvas.style.width = "";
32        main.canvas.style.marginLeft = "";
33        main.canvas.style.marginTop = "";
34        stage.x = 0;
35        stage.y = 0;
36
37        var dotti;
38        if(window.innerH / window.innerW != main.stageHeight /  main.stageWidth) {
39            //縦横比が異なる
40            if(window.innerH / window.innerW < main.stageHeight /  main.stageWidth) {
41                //ipad
42                console.log("ipad");
43                dotti = 1;
44                main.displayWidth = window.innerW / window.innerH * main.stageHeight;
45                if(main.displayWidth > main.displayWidthMax) {
46                    main.displayWidth = main.displayWidthMax;
47                }
48            } else {
49                //ipone5
50                console.log("iphone5");
51                dotti = 2;
52                main.displayHeight = window.innerH / window.innerW *main. stageWidth;
53
54                if(main.displayHeight > main.displayHeightMax) {
55                    main.displayHeight = main.displayHeightMax;
56                }
57            }
58        }
59        var scale;
60        if(dotti == 1) {
61            //横長端末
62            main.canvas.width = main.displayWidth;
63            main.canvas.style.height =  window.innerH + "px";
64            scale = window.innerH / main.stageHeight;
65            main.canvas.style.width = (main.displayWidth * scale) + "px";
66
67            stage.x = (main.displayWidth - main.stageWidth) / 2;
68            var sa = (window.innerW - (main.displayWidth * scale)) / 2;
69
70            if(sa > 0) {
71                main.canvas.style.marginLeft = sa + "px";
72            }
73        }
74        else if(dotti == 2) {
75            //縦長端末
76            main.canvas.height = main.displayHeight;
77            main.canvas.style.width = window.innerW  + "px";
78
79            scale = window.innerW / main.stageWidth;
80            main.canvas.style.height = (main.displayHeight * scale)  + "px";
81
82            stage.y = (main.displayHeight - main.stageHeight)  / 2;
83            var sa = (window.innerH - (main.displayHeight * scale)) / 2;
84
85            if(sa > 0) {
86                main.canvas.style.marginTop = sa + "px";
87            }
88        }
89    }

補足情報（FW/ツールのバージョンなど）

WebStome:2019.2.2
createjs:1.0.0
Google Chrome:77.0.3865.120

行動規範の内容に同意します

回答2件

自己解決

問題はcreateJSのStageGLでした
通常のStageだとcanvasのstyleを変更するだけで充分でしたが
StageGLでは変更した後にviewportを更新しなければならないのが抜けていました

javascript
1// Stage
2var canvas = document.getElementById("canvas");
3var stage = new createjs.Stage(canvas);
4canvas.width = 640;
5canvas.height = 960;
6
7// StageGL
8var canvas = document.getElementById("canvas");
9var stage = new createjs.StageGL(canvas, {antialias: true});
10canvas.width = 640;
11canvas.height = 960;
12stage.updateViewport(canvas.width, canvas.height); //←ここを追記
13