setDragImage not removing ghost image on Chrome?

Question

I have an element that is draggable. I want to remove the ghost image, since I will be creating that in another way.

However, Google Chrome is not letting me stop the ghost image from appearing using setDragImage(). The blank image is being created before the drag, and I'm using setDragImage() inside the dragstart event handler, so I don't see what I'm doing wrong. The ghost image should not be appearing.

Here's an example:

const blankCanvas = document.createElement('canvas');

document.querySelector('.item')
  .addEventListener('dragstart', (e) => {
    e.dataTransfer.setDragImage(blankCanvas, 0, 0);
  });

.item {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  margin: 1rem;
  border: 2px solid #fe0000;
  cursor: pointer;
}

.item__img {
  width: 100%;
  height: auto;
}

<div draggable="true" class="item">
  <img src="https://i.stack.imgur.com/drhx7.png" alt="" class="item__img">
</div>

On Chrome, If you drag the box with the red border, the ghost image will appear, even though I'm using setDragImage(). Everything works correctly on Firefox (and Edge... doesn't even have the function).

My Chrome version is 66.

Answer 1

Adding to a solution provided by @ness-EE.

This is the solution I used and also handles case of hiding the globe in chrome

public handleDragStart( event : DragEvent ) : void {
    const blankCanvas: any = document.createElement('canvas');
    event.dataTransfer?.setDragImage( blankCanvas, 0, 0);
    document.body?.appendChild( blankCanvas);
}