Canvas, 複数設置作った後に設置される場所がわからない

ゲームを作ろうとしていて、IDを分ければCanvasを分割して別々に回転や縮小できると思ったのですが、位置調整がうまくいきません。widthとheightは設定できるのですが、初期いちはどうやったら任意の位置におけるのでしょうか？
詳しい方よろしくお願いします！

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Canvas X 4</title>
6    <style>
7        * {
8            background: #000;
9        }
10      
11    </style>
12</head>
13<body>
14    <canvas id = 'cvs1'></canvas>
15    <canvas id = 'cvs2'></canvas>
16    <canvas id = 'cvs3'></canvas>
17    <canvas id = 'cvs4'></canvas>
18    
19    <script> // Dont move =============================
20
21
22const cvs1 = document.getElementById('cvs1');
23const c1 = cvs1.getContext('2d'); // Null.
24const cvs2 = document.getElementById('cvs2');
25const c2 = cvs2.getContext('2d'); // Null.
26const cvs3 = document.getElementById('cvs3');
27const c3 = cvs3.getContext('2d'); // Null.
28
29const endX = window.innerWidth;
30const endY = window.innerHeight;
31const midX =  window.innerWidth/2;
32const midY =  window.innerHeight/2;
33
34
35
36function render() {
37
38    c1.clearRect(0,0,endX,endY);
39    c1.fillStyle ='#f00'; 
40    c1.fillRect(0,0,midX,midY);
41
42    c2.fillStyle ='#ff0'; 
43    c2.fillRect(0,0,midX,midY);
44
45    c3.fillStyle ='#f0f'; 
46    c3.fillRect(0,0,midX,midY);
47
48    console.log('midx',midX );
49    
50            
51            
52            
53            
54            
55            
56    requestAnimationFrame(render); // 1000/30fps 
57} render();
58    </script>
59</body>
60</html>
61