canvas.toDataURL returns empty data:, string using array and loop

Question

Having this issue with canvas.toDataURL. I try to crop an rectangular image in 4 parts and use them as a texture in threejs. Sometimes the model gets textured, sometimes not. I thought it was a bug in threejs, but tried this seperate function and in result I get either a base64 code or just an empty 'data:,'. I can't figure out why this function works around every third time only. Here the fiddle, but please consider, that the jsfiddle filters the image. There should come either a base64 string or 'data:,'

<button onclick="updatePics()">
  Test
</button>

<script>
function updatePics(){

    var pics = new Array(20);
    var j = -1;

    for(var i=1; i<=5;i++){

        var imgrenderData = 'https://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/'+i+'.jpg';

        var image = new Image();
        image.src = imgrenderData;

        image.onload = (function(){

            var canvasrend1 = document.createElement("canvas");
            var ctxrend1 = canvasrend1.getContext("2d");

            var canvasrend2 = document.createElement("canvas");
            var ctxrend2 = canvasrend2.getContext("2d");

            var canvasrend3 = document.createElement("canvas");
            var ctxrend3 = canvasrend3.getContext("2d");

            var canvasrend4 = document.createElement("canvas");
            var ctxrend4 = canvasrend4.getContext("2d");

            canvasrend1.width = image.width/2;
            canvasrend1.height = image.height/2;

            ctxrend1.drawImage(image, 0, 0, image.width/2, image.height/2, 0, 0, canvasrend1.width, canvasrend1.height);

            canvasrend2.width = image.width/2;
            canvasrend2.height = image.height/2;

            ctxrend2.drawImage(image, image.width/2, 0, image.width/2, image.height/2, 0, 0, canvasrend2.width, canvasrend2.height);

            canvasrend3.width = image.width/2;
            canvasrend3.height = image.height/2;

            ctxrend3.drawImage(image, image.width/2, image.height/2, image.width/2, image.height/2, 0, 0, canvasrend3.width, canvasrend3.height);

            canvasrend4.width = image.width/2;
            canvasrend4.height = image.height/2;

            ctxrend4.drawImage(image, 0, image.height/2, image.width/2, image.height/2, 0, 0, canvasrend4.width, canvasrend4.height);

            var newimage1 = canvasrend1.toDataURL();
            var newimage2 = canvasrend2.toDataURL();
            var newimage3 = canvasrend3.toDataURL();
            var newimage4 = canvasrend4.toDataURL();

            j++;
            pics[j]=newimage1;
            j++;
            pics[j]=newimage2;
            j++;
            pics[j]=newimage3;
            j++;
            pics[j]=newimage4;

            if(i==5){
                alert(pics[0]);
            }


        })(i);

    }
}

</script>

Answer 1

Your image is not loaded try to load the url https://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/2.jpg

you can see there is no image, which cause the image.width and image.height to be 0, so there is no data to this canvas from method ctxrend1.drawImage.