如何在javascript/html中将图像放在画布球的顶部

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "image.jpg"; // 替换为你的图像路径

image.onload = function() {
  ctx.drawImage(image, 0, 0); // 将图像绘制在画布的左上角
};

function drawBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2); // 绘制一个球体
  ctx.closePath();
  ctx.fillStyle = "red"; // 替换为你想要的球体颜色
  ctx.fill();
  
  // 将图像绘制在球体顶部
  var imageX = canvas.width/2 - image.width/2;
  var imageY = canvas.height/2 - image.height/2 - 50; // 图像在球体顶部的位置
  ctx.drawImage(image, imageX, imageY);
}

drawBall(); // 调用函数绘制球体和图像