javascript - キャンバス要素にマスクと背景を追加する方法

Question

背景画像付きのpngでマスクされた画像を作成しようとしています。マスクされた画像のみを配置すると正常に機能しますが、背景画像を追加すると前面画像はマスクされなくなります

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var bg = new Image();
  var front = new Image();
  var mask = new Image();

  bg.src = 'img/background.jpg';

  bg.onload = function() {
    front.src = "img/tobemasked.jpg";
  };

  front.onload = function() {
    mask.src = "img/mask.png";
  }

  mask.onload = function() {
    display();
  }

  function display() {
    context.drawImage(bg, 0, 0); // it works if i remove this line
    context.drawImage(tmpMask, 0, 0);
    context.globalCompositeOperation = "source-in";
    context.drawImage(front, 0, 0);
  }
</script>

これはかなり一般的な問題だと思いますが、関連するものはウェブ上で見つかりませんでした。

ご協力ありがとうございました。