並んだ図形を縦に配置

Visual basicで書いてます。
以下を実行すると
canvasのbackgroundcollarしか表示されません。

片方を消すと、図形は表示されます。
backgroundcollarはわかりやすくするために色を付けただけなので、あまり意味はないですが、2つの図形を上下ともに表示させるためには、何を変化させると良いのでしょうか。

イメージ図
.　　□　□
ーー空ー白ーー
.　　□　□

※　それぞれ図形は数値入力でサイズを動かせるようにしたいと思っています。

教えていただける方いらっしゃいましたら、よろしくお願い致します。

cx20

2021/11/05 15:21

> ＃が入っていると太文字になったので、”。”を付けました。 teratail では Markdown（マークダウン）の記法に対応している為、先頭に「#」を付けると太字になります。 https://teratail.com/help#about-markdown コードブロックを記述する際は以下を参考にしてみて下さい。＜コードブロックの記入例＞ ```html ソースコード ```

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

回答1件

ベストアンサー

表示させたいイメージはこのようなものでしょうか？

片方を消すと、図形は表示されます。

表示されない原因の１つは描画用の関数 draw() が上下ともに同じ関数名である為です。
それぞれ別の名前にしてみて下さい。

以下は、関数名を分けた場合の例になります。

html
1<style type="text/css">
2#pattern1 {
3    background: #F0FFF0;
4}
5#metoru {
6    background: #E6E6FA;
7}
8</style>
9
10<body onload="draw()">
11<canvas id="pattern1" width="1000" height="500"></canvas>
12<canvas id="metoru" width="1000" height="500"></canvas>
13
14<script>
15function draw() {
16    // 上の図形を描画
17    drawPattern1();
18    // 下の図形を描画
19    drawMetoru();
20}
21
22function drawPattern1() {
23    var canvas = document.getElementById('pattern1');
24    if (canvas.getContext) {
25        var ctx = canvas.getContext('2d');
26
27        ctx.strokeRect(20, 20, 180, 180);
28        ctx.strokeRect(500, 20, 180, 180);
29    }
30}
31
32function drawMetoru() {
33    var metoru = document.getElementById('metoru');
34    if (metoru.getContext) {
35        var mtr = metoru.getContext('2d');
36
37        //ctx.strokeRect(20, 20, 180, 180);
38        //ctx.strokeRect(500, 20, 180, 180);
39        mtr.strokeRect(20, 20, 180, 180);    // 「ctx」→「mtr」に変更
40        mtr.strokeRect(500, 20, 180, 180);   // 「ctx」→「mtr」に変更
41    }
42}
43</script>
44</body>
45