javascript - 如何单击以将当前轮播幻灯片中的图像放置到画布上？

Question

我正在创建一个 Web 应用程序，用户可以在其中滑动到 Bootstrap Carousel 上选择的图像，然后单击画布以放置所述选择图像。用户可以通过多次点击多次放置相同的图像。

我在绘图部分遇到困难。

我已经在轮播中获得了活动图像的点击坐标和来源，并且我尝试了一个等待绘制的函数，以防在最初调用绘制函数时未加载图像。

javascript

var canvas = document.getElementById('canv');
var context = canvas.getContext('2d');
canvas.addEventListener('click', placeImage);

function placeImage() {
   cx = event.pageX;
   cy = event.pageY;

   var url = document.getElementsByClassName("carousel-item 
   active")[0].children[0].src;

   var sticker = new Image();
   sticker.src = url;
   draw(context, sticker, cx, cy);
}

function draw(context, sticker, cx, cy) {
   if (!sticker.complete) {
      setTimeout( function() {
         draw(context, sticker, cx, cy);
      }, 50);
      return;
   }
   context.drawImage(sticker, cx, cy);
}

我希望当我单击画布时，将在画布上我刚刚单击的坐标处绘制与活动轮播幻灯片中的图像（尺寸和所有）相同的图像。实际输出什么都没有。

标签： javascriptjqueryhtmlcssbootstrap-4