canvas上にボタン配置

Question

canvas上にボタンを配置したいのですが、canvasの位置を調整したりして、いろいろ試しましたがうまくいきませんでした。以下のリンクで英語のボタンをcanvas上に配置したいです。200行目付近を書き換えると思うのですがよくわかりません。
どなたかお願いします。
リンク内容

 // ボタン配置位置
            var area = document.getElementById("sort_button_area");
            if (bi > 8) {
    
                area.setAttribute("style", "text-align: center;");
            } else {
                area.setAttribute("style", "text-align: center;");
            }
    
            if(flg == 2)
            {
                document.getElementById('Problem').innerHTML = "解答：" + answers[current_number];
                document.getElementById('Correct').innerHTML = "正解：" + qarray1[random_number[current_number]].answer + "";
            }
        }

Comments

[m.ts10806]

質問内のコードで再現できるように配慮願います。

[yambejp]

結局canvasにしたのでしょうか？
canvas上にインタラクティブな要素を埋め込んでも処理が大変なだけだと思いますが・・

[Lhankor_Mhy]

「うまくいきませんでした」とのことですが、具体的には何がどのようにうまくいっていないのですか？

「こうなると思って」「このコードを書いたが」「この結果になった」
のように、想定・コード・結果をセットでご提示ください。

期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3

エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

Answer 1

canvasでやる意味がないような気がします

<style>
#view{display:flex;}
#view div{border:solid 1px;border-radius:5px;padding:0px 2px 0px 2px ;}
#view div:not(:first-child){margin-left:10px;}
#view [data-disabled]{background-Color:gray;}
</style>

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const q="Many people visit London every year .";
  const view=document.querySelector('#view');
  const q_arr=q.split(' ')
    .map(x=>[x,Math.random()])
    .sort((x,y)=>x[1]-y[1])
    .map(x=>x[0]);
  q_arr.forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
  const a_arr=[];
  document.querySelectorAll('#view div').forEach(x=>{
    x.addEventListener('click',e=>{
      if(!e.target.closest('[data-disabled]')){
        a_arr.push(e.target.textContent);
        e.target.setAttribute('data-disabled',1);
        ans.textContent=a_arr.join(" ");
        if(a_arr.length==q_arr.length){
          document.querySelector('#judge').textContent=q==ans.textContent?'正解！':'不正解';
        }
      }
    });
  });
  document.querySelector('#reset').addEventListener('click',e=>{
    a_arr.length=0;
    document.querySelectorAll('[data-disabled]').forEach(x=>x.removeAttribute('data-disabled'));
    document.querySelectorAll('#ans,#judge').forEach(x=>x.textContent='');
  });
});
</script>
<div id="view"></div>
<input type="button" id="reset" value="リセット">
<div id="ans"></div>
<div id="judge"></div>

Comments

[Ciel217]

今回もありがとうございます
やはり、canvasを使ったものでは自分では無理そうなので
こちらの書き方で１からやってみたいと思います。
おそらくこれからもわからないことだらけになると思うので、
その時はまたお願いします。

[yambejp]

挙動的に問題ないならうまく拡張して使ってください
わからないことや詰まることがあれば別途ご質問ください
１個だけ気になっていたのが、先頭の文字が最初から大きいと
明らかに先頭ってわかっちゃうかな・・・という点です。
できればIとか国名など特殊なモノ以外は先頭文字も小文字にしておき
選んだ時点で大文字に変更するなど工夫が必要かなと。

Answer 2

「開始」ボタン押下後にでるボタンたちをcanvas要素の上に乗せたい、ということであれば、以下のようにCSSを変更するとよいでしょう。

.container {
/*
	position: relative;
*/
	background-color: rgb(248, 246, 246);
	position: absolute;
}

Comments

[Ciel217]

上記のように書き換えたところcanvas自体が消えてしまいました。

[Lhankor_Mhy]

上に乗っているので、隠れているだけだと思います。

[Lhankor_Mhy]

ああ、いや、違うのか。ボックスがつぶれているのですね。
適切にサイズを指定すればいいかと思いますよ。

[Ciel217]

何度もすみません、サイズ指定はどこを変えればよいのでしょうか

[Lhankor_Mhy]

width: 100%
などとすればいいかと思います。