canvasの位置調整の方法を知りたい

実現したいこと

二つ目のcanvasの位置調整の方法を知りたいです
何と書けば位置を調整できるでしょうか

前提

JavaScriptでテトリスを作ろうとしています。
今のテトリスのゲーム画面（？）の右上にNEXTの枠を作りたいのですが二つ目のcanvasの位置調整の方法がわかりません

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html>
3<body>
4<canvas id="can1"></canvas>
5<canvas id="can2"></canvas>
6<script>
7//落ちるスピード
8const GAME_SPEED = 500
9
10
11//フィールドサイズ
12const FIELD_COL = 10;
13const FIELD_ROW = 20;
14
15//ブロック一つのサイズ（ピクセル）
16const BLOCK_SIZE = 30;
17
18//キャンバスサイズ
19const SCREEN_W = BLOCK_SIZE * FIELD_COL
20const SCREEN_H = BLOCK_SIZE * FIELD_ROW
21
22//NEXT
23
24const screen_W = BLOCK_SIZE * 4;
25const screen_H = BLOCK_SIZE * 4;
26
27let can2 = document.getElementById("can2");
28let con2 = can2.getContext("2d");
29
30can2.width			= screen_W;
31can2.height			= screen_H;
32can2.style.border	= "4px solid #555";
33
34//テトロミノのサイズ
35const TETRO_SIZE=4;
36
37let can1 = document.getElementById("can1");
38let con = can1.getContext("2d");
39
40can1.width        = SCREEN_W;
41can1.height       = SCREEN_H;
42can1.style.border = "4px solid #555 ";
43
44const TETRO_COLORS = [
45	"#000",				//0空
46	"#6CF",				//1水色
47	"#F92",				//２オレンジ
48	"#66F",				//３青
49	"#C5C",				//４紫
50	"#FD2",				//５黄色
51	"#F44",				//６赤
52	"#5B5"				//７緑
53];
54
55const TETRO_TYPES = [
56	[],//0.空
57	
58	[					//1.I
59		[ 0,0,0,0,],
60		[ 1,1,1,1,],
61		[ 0,0,0,0,],
62		[ 0,0,0,0,]
63	],
64	[					//2.L
65		[ 0,1,0,0,],
66		[ 0,1,0,0,],
67		[ 0,1,1,0,],
68		[ 0,0,0,0,]
69	],	
70	[					//3.J
71		[ 0,0,1,0,],
72		[ 0,0,1,0,],
73		[ 0,1,1,0,],
74		[ 0,0,0,0,]
75	],	
76	[					//4.T
77		[ 0,1,0,0,],
78		[ 0,1,1,0,],
79		[ 0,1,0,0,],
80		[ 0,0,0,0,]
81	],	
82	[					//5,O
83		[ 0,0,0,0,],
84		[ 0,1,1,0,],
85		[ 0,1,1,0,],
86		[ 0,0,0,0,]
87	],	
88	[					//6.Z
89		[ 0,0,0,0,],
90		[ 0,1,1,0,],
91		[ 0,0,1,1,],
92		[ 0,0,0,0,]
93	],	
94	[					//7.S
95		[ 0,0,0,0,],
96		[ 0,1,1,0,],
97		[ 1,1,0,0,],
98		[ 0,0,0,0,]
99	]
100];
101	
102const START_X = FIELD_COL/2 - TETRO_SIZE/2;
103const START_Y = 0;
104//テトロミノ本体
105let tetro;
106//テトロミノの座標
107let tetro_x = START_X;
108let tetro_y = START_Y;
109
110let tetro_t;//テトロミノの形
111//フィールドの中身
112let field = [];
113
114//ゲームオーバー
115let over = false;
116
117tetro_t = Math.floor( Math.random()*(TETRO_TYPES.length-1) )+1
118tetro = TETRO_TYPES[ tetro_t ];
119
120setInterval( dropTetro, GAME_SPEED );
121
122
123
124//初期化
125function init()
126{
127	for(let y=0; y<FIELD_ROW ; y++)
128	{
129		field[y] = [];
130		for(let x=0; x<FIELD_COL ; x++)
131		{
132		     field[y][x] = 0;
133		}
134	}
135}
136
137init()
138drawAll()
139
140
141
142
143//ブロック一つを描画
144function drawBlock(x,y,c)
145{
146	let px = x * BLOCK_SIZE;
147	let py = y * BLOCK_SIZE;	
148	
149	con.fillStyle=TETRO_COLORS[c];
150	con.fillRect(px,py, BLOCK_SIZE ,BLOCK_SIZE );
151	con.fillStyle="black";
152	con.strokeRect(px,py, BLOCK_SIZE ,BLOCK_SIZE );
153}
154//すべて描画する
155function drawAll()
156{
157	con.clearRect(0,0,SCREEN_W,SCREEN_H);
158	
159	for(let y=0; y<FIELD_ROW ; y++)
160	{
161		for(let x=0; x<FIELD_COL ; x++)
162		{
163			if( field[y][x]  )
164			{
165				drawBlock(x,y, field[y][x]);
166			}
167		}
168	}
169	
170	for(let y=0; y<TETRO_SIZE ; y++)
171	{
172		for(let x=0; x<TETRO_SIZE ; x++)
173		{
174			if( tetro[y][x] )
175			{
176				drawBlock(tetro_x+x,tetro_y+y, tetro_t);
177			}
178		}
179	}
180	
181	if(over)
182	{
183		let s="GAME OVER";
184		con.font = "40px ' MS ゴシック";
185		let w = con.measureText(s).width;
186		let x = SCREEN_W/2 - w/2;
187		let y = SCREEN_H/2 - 20;
188		con.lineWidth = 4;
189		con.strokeText(s,x,y);
190		con.fillStyle="white";
191		con.fillText(s,x,y);
192	}
193}
194
195//ブロックの当たり判定
196function checkMove( mx, my ,ntetro)
197{
198	if( ntetro == undefined ) ntetro = tetro
199	for(let y=0; y<TETRO_SIZE ; y++)
200	{
201		for(let x=0; x<TETRO_SIZE ; x++)
202		{
203			if ( ntetro[y][x] )
204			{
205				let nx = tetro_x + mx + x;
206				let ny = tetro_y + my + y;
207				
208				if( ny < 0 ||
209					nx < 0 ||
210					ny >= FIELD_ROW ||
211					nx >= FIELD_COL||
212					field[ny][nx]  )
213				{
214				 return false;
215				 }
216			}
217		}
218	}
219	return true;
220}
221
222//テトロミノの回転
223function rotate()
224{
225	let ntetro = [];
226	
227	for(let y=0; y<TETRO_SIZE ; y++)
228	{
229		ntetro[y]=[];
230		for(let x=0; x<TETRO_SIZE ; x++)
231		{
232			ntetro[y][x] = tetro[TETRO_SIZE-x-1][y];
233		}
234	}
235	
236	return ntetro;
237}
238
239//テトロの固定
240function fixTetro()
241{
242	for(let y=0; y<TETRO_SIZE ; y++)
243	{
244		for(let x=0; x<TETRO_SIZE ; x++)
245		{
246			if ( tetro[y][x])
247			{
248				field[tetro_y + y ][tetro_x + x] =tetro_t;
249			}
250		}
251	}
252}
253
254//ラインが揃ったかチェックして消す
255function checkLine()
256{
257	let linec=0;
258	for(let y=0; y<FIELD_ROW ; y++)
259	{
260		let flag=true;
261		
262		for(let x=0; x<FIELD_COL ; x++)
263		{
264			if( !field[y][x])
265			{
266				flag=false;
267				break;
268			}
269		}
270		
271		if(flag)
272		{
273			linec++;
274			
275			for(let ny = y; ny>0 ; ny-- )
276			{
277				for(let nx =0 ;nx<FIELD_COL;nx++)
278				{
279					field[ny][nx] = field[ny-1][nx];
280				}
281			}
282		}
283	}
284}
285
286
287//ブロックの落ちる処理
288function dropTetro()
289{
290	if(over)return;
291	if( checkMove(  0,1 ) )tetro_y++;
292	else
293	{
294		fixTetro()
295		checkLine()
296		
297		tetro_t = Math.floor( Math.random()*(TETRO_TYPES.length-1) )+1
298		tetro = TETRO_TYPES[ tetro_t ];
299		tetro_x = START_X;
300		tetro_y = START_Y;
301		
302		if( !checkMove(0,0) )
303		{
304			over=true;
305		}
306	}
307	
308	drawAll();
309}
310
311
312
313
314//キーボードが押された時の処理
315document.onkeydown = function(e)
316{
317	if(over)return;
318	// onkeydown keycode 検索
319	
320	switch( e.keyCode )
321	{
322		case 37://左
323			if( checkMove( -1,0 ) )tetro_x--;
324			break;
325		case 38://上
326			if( checkMove( 0,-1 ) )tetro_y--;
327			break;
328		case 39://右
329			if( checkMove(  1,0 ) )tetro_x++;
330			break;
331		case 40://下
332			if( checkMove(  0,1 ) )tetro_y++;
333			break;
334		case 32://スペース
335			let ntetro = rotate();
336			if( checkMove (0,0, ntetro)) tetro = ntetro
337			break;
338	}
339
340	drawAll();
341}
342
343</script>
344</body>
345</html>
346