<style>
body {
  font: 20px/1.5 sans-serif;
  padding: 16px;
  color: #20354e;
}
button, input, select { font: inherit; }

</style>
<canvas id="poster" width="640" height="360" style="max-width:100%;height:auto;border:1px solid #aaa">黄梅戏分享会海报</canvas>
<script>
const canvas = document.querySelector('#poster');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'navy';
ctx.fillRect(0, 0, 640, 360);
ctx.fillStyle = 'white';
ctx.font = '32px sans-serif';
ctx.fillText('黄梅戏分享会', 40, 90);
// 将填充背景的两行移到最后，预测文字是否还可见。
</script>