How to click to place an image from the current carousel slide onto a canvas?

Question

I'm a creating a web app where a user can slide to an image of choice on a Bootstrap Carousel, and click on a canvas to place said image of choice. The user can place the same image multiple times with multiple clicks.

I'm having difficulties with the drawing part.

I already have the click coordinates and source of the active image in the carousel, and I have tried a function that waits to draw in case image isn't loaded when draw function is initally called.

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);
}

I expect that when I click on the canvas, an image identical to the one in the active carousel slide (dimensions and all) will be drawn on the canvas at the coordinates where I just clicked. The actual output is nothing.