从一个矩形开始

运行下面的示例，会在画布左上方出现一个黑色矩形。海报中的色块也可以这样画，随后再添加其他图形和文字。

<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.fillRect(20, 20, 100, 60);
</script>