UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Steps to reproduce the problem:
1. React Code:

setDragImage(e) {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

//ctx.beginPath();
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 176, 100);
//ctx.fillStyle = 'red';
//ctx.fill();

// let images = [];
// const {dragImages} = this.props;
// for (let key in dragImages) {
// images.push(dragImages[key]);
// }
//
// for (let i = images.length - 1; i >= 0; i--) {
// let image = images[i];
// ctx.drawImage(image, i * 10, i * 10, 176, 100);
// }

let dragIcon = document.createElement('img');
// dragIcon.style.display = 'block';
// dragIcon.style.background = 'red';
dragIcon.src = canvas.toDataURL();
console.log('drag icon src = ' + dragIcon.src);

// Add drag icon to document to force redraw...
// TODO Do we need to remove this child on drop?
document.body.appendChild(dragIcon);

let clientRect = e.target.getBoundingClientRect();
let offsetX = (e.clientX - clientRect.left) - 50;
let offsetY = (e.clientY - clientRect.top) - 50;

// Set drag image
e.dataTransfer.setDragImage(dragIcon, offsetX, offsetY);
}
2. 
3. 

What is the expected behavior?
render canvas

What went wrong?
did not render

Did this work before? Yes 62

Does this work in other browsers? Yes

Chrome version: 63.0.3239.84  Channel: stable
OS Version: OS X 10.13.1
Flash Version: Shockwave Flash 28.0 r0