Рисование круга / ар c поверх изображения в HTML холсте

Question

У меня есть простой холст с прямоугольником в качестве фона, изображение внизу, и я пытаюсь нарисовать круг, часть которого перекрывает изображение. Я немного застрял на том, какой globalCompositeOperation использовать, чтобы дуга / круг появлялись поверх изображения на холсте.

Код:

   var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

      context.fillStyle = "#29BEF1";
      context.fillRect(0, 0, 800, 131);

       var img = new Image;
       img.src = 'https://i.imgur.com/aN26XpH.png';

       img.onload = function() {
          context.drawImage(img, 0, 29)
      } 

      context.beginPath();
      context.arc(800, -29, 87, 0, 2 * Math.PI);
      context.closePath();
      context.fillStyle = '#FEDB62';
      context.fill();

      body {
        margin: 0px;
        padding: 0px;
      }

    <canvas id="myCanvas" width="800" height="131"></canvas>

Answer 1

Проблема вызвана тем, что загрузка изображения происходит асинхронно, а затем после загрузки и рисования оно перекрывает то, что уже было нарисовано.

Решение состоит в том, чтобы переместить код, рисующий солнце, в обратный вызов onload.

img.onload = function() {
  // draw image
  context.drawImage(img, 0, 29)

  // draw sun
  context.beginPath();
  context.arc(800, -29, 87, 0, 2 * Math.PI);
  context.closePath();
  context.fillStyle = '#FEDB62';
  context.fill();
}