Data uri not found when changing cursor image

Question

         function rotateImageOnCanvas(path) {
             fighterJets = [];
                var img = new Image();
            img.src = path;
            img.onload = function() {
             this.width = 30;
             this.height = 30;
             var can = document.createElement('canvas');
            var ctx = can.getContext('2d');
            ctx.drawImage(this, 0, 0, this.width, this.height);
            for(d=0;d<360;d++) {ctx.rotate(1);fighterJets.push(can.toDataURL());}
        };
       }

I am trying to load an image from the server. Once loaded then rotate the image on the canvas and store the data uri in an array to be used later without having to make a call to the server again. but when I try to change the cursor image with the data uri I get "Invalid property value" in firefox;

 parameter.style.cursor = 'url('+fighterJets[90]+') 15 15, auto'

I have checked and the data uri is on the style atribute of parameter (it's very large I can't miss it). so I am lost as what to do next. I have a poor understating of canavas and i suspect i am doing something wrong plus can you assign data uri to cursor image if not is there any workarounds. any help is welcomed

Answer 1

After lots of trial and error I realized that I was get invalid "Invalid property value" because I wasn't matching the canavas size to the image and thus the resulting image was becoming to big and thus was not showing on the cursor. below is the working code.

    function rotateFighterJetOnCanvas(path,degrees) {
        var img = new Image();
        img.src = path;
        img.onload = function() {
            var can = document.createElement('canvas');
            var ctx = can.getContext('2d');
            can.width =30;can.height =30;
            ctx.translate(15, 15);
            ctx.rotate(Math.radians(degrees));
            ctx.imageSmoothingEnabled = false;
            ctx.drawImage(this, -15, -15, 30, 30);
            ctx.rotate(-Math.radians(degrees));
            ctx.translate(-15, -15);
            fighterJets.push(can.toDataURL("image/png",1.0));
        };
    }
    Math.radians = function(degrees) {
        return degrees * Math.PI / 180;
    };