HTML5 Draggable setDragImage doesn't work with canvas on Chrome

Question

I'm trying to use canvas as my drag image in native HTML5 Drag And Drop API.

The problem is that it works on Firefox but not on Chrome (58) and I can't pinpoint the problem.

Code: https://jsfiddle.net/196urLwd/5/

---

<div id="thing" draggable="true">DRAG ME</div>

---

function onDragStart(event){

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.width = 100;
    canvas.height = 20;

    context.fillStyle = '#333333';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#999999';
    context.font = 'bold 13px Arial';
    context.fillText('DRAGGING...', 5, 15);

    event.dataTransfer.setData('text', 'lorem ipsum');
    event.dataTransfer.effectAllowed = 'copy';    
    event.dataTransfer.setDragImage(canvas, -15, 9);

};

var theThing = document.getElementById('thing');
theThing.addEventListener('dragstart', onDragStart, false);

What am I doing wrong?

Answer 1

Chrome seems to require the canvas to be in the dom

document.body.append(canvas);

and just hide it with some css

canvas{
  position:absolute;
  left:-100%;
}

https://jsfiddle.net/196urLwd/6/