Dynamically changing cursor

HTML

<div class="elem"></div>

CSS

.elem {
    background-color: #faa;
    height: 100px;
    width: 100px;
}

JavaScript

var elem = document.querySelector('.elem');

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

c.width = 50;
c.height = 50;

function draw () {
    cx.rect(0,0,c.width,c.height);
    cx.fillStyle = 'rgb('+ Math.floor(Math.random()*255) +','+ Math.floor(Math.random()*0) +','+ Math.floor(Math.random()*0) +')';
    cx.fill();
    
    elem.style.cursor = 'url('+ c.toDataURL() +')'+ c.width/2 +' '+ c.height/2 +', none';
    
    requestAnimationFrame(draw);
};
requestAnimationFrame(draw);