[canvas]要素の上にHTML記載で文字や画像を載せる方法

おにぎり屋

「握るだけじゃない、心まで込めてます。」
「三角の中に、無限の美味しさを詰めました。」
「あなたのお腹に、幸せをデリバリー。」
「米（こめ）っと心を込めて作りました！」

<div class="main-post-code-content">
<div class="canvas-wrap">
<canvas id="wave"></canvas>
<div class="wave-overlay">
<div class="flex_in">
<div class="box"><img src="/wp-content/uploads/2024/12/building_onigiri_shop.png" alt="おにぎり屋" width="704" height="704" class="aligncenter size-full wp-image-62" /></div>
<div class="box">
<div class="box-title">おにぎり屋</div>
<div class="box-text"><p>「握るだけじゃない、心まで込めてます。」
「三角の中に、無限の美味しさを詰めました。」
「あなたのお腹に、幸せをデリバリー。」
「米（こめ）っと心を込めて作りました！」</p></div>
</div>
</div>
</div>
</div>

.canvas-wrap {
    position: relative;
    background-color: #000000;
}
canvas#wave {
    width: 100%;
    height: calc(100vh* 0.55);
}
.wave-overlay {
    position: absolute;
    top: 0%;
    left: 0%;
}
.flex_in {
	display: flex;
    flex-wrap: wrap;
}
.box {
    width: calc(100% / 2.1);
    margin: 30px auto;
}
.box-title {
	font-size: 1.5rem;
    font-weight: 900;
    color: #FFFFFF;
}
.box-text {
	color: #FFFFFF;
}