HTML5可拖曳的setDragImage不適用於Chrome上的畫布

Question

我試圖使用畫布作爲本機HTML5拖放API的拖拽圖像。

問題是，它適用於Firefox，但不適用於Chrome（58），我無法找到問題所在。

代碼：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); 

我在做什麼錯？

Answer 1

鉻似乎需要畫布是在DOM

document.body.append(canvas); 

，只是用一些CSS

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

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