A-Frame/Javascript-Slideshow has wrong mapping

I have a similar slideshow displayed a few times here! It works fine but I don't get the right mapping on an a-sky. I am not a coder but I guess drawImage is just made for rectangular objects instead of spherical? Is there an alternative to drawImage which works for spherical?

Here are my codes:

AFRAME.registerComponent('draw-canvas', {
    schema: {
        type: 'selector'
    },

    init: function() {
        var canvas = this.canvas = this.data;
        var ctx = this.ctx = canvas.getContext('2d');
        var i = 0; // Start Point
        var images = []; // Images Array
        var time = 3000; // Time Between Switch

        // Image List
        images[0] = "Tulips.jpg";
        images[1] = "Tulips2.jpg";
        images[2] = "Tulips3.jpg";

        // Change Image
        function changeImg() {
            document.getElementById('pic01').src = images[i];
            ctx.drawImage(document.getElementById('pic01'), 0, 0, 300, 300);

            // Check If Index Is Under Max
            if (i < images.length - 1) {
                // Add 1 to Index
                i++;
            } else {
                // Reset Back To O
                i = 0;
            }
            // Run function every x seconds
            setTimeout(function() {
                changeImg()
            }, time);
        }
        // Run function when page loads
        window.onload = changeImg;
        console.log("Hello World!");
    }
});

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Canvas Texture</title>
    <meta name="description" content="Canvas Texture - A-Frame">
    <script src="./components/aframe-v0.6.0.js"></script>
    <script src="./components/slideshow.js"></script>
</head>

<body>
    <a-scene>
        <a-assets>
            <img id="pic01" src="Tulips.jpg">
            <img id="pic02" src="Tulips2.jpg">
            <img id="pic03" src="Tulips3.jpg">
            <canvas id="slide" name="slide" crossOrigin="anonymous"> </canvas>
        </a-assets>
        <a-sky material="shader: flat; src: #slide" draw-canvas="#slide">
            <a-sky/>
    </a-scene>
</body>

</html>

And if anybody knows how to nicely fade over the pictures, please feel free to share! I bet a lot of people would be happy about a nice A-Frame Slideshow.

Solution

I've got a solution, but I've altered quite a lot of Your stuff.

I've got rid of the canvas, You already have three image assets, no need to rewrite, or buffer them on each other. Just store the asset id's and use setAttribute("material", "src", picID)

Furthermore I've added the a-animation component, so Your slideshow will have a nice smooth transition. You need to set the animation duration to the slideshow's time / 2, for it goes back and forth.

This said, check out my fiddle.

As for the drawImage part of the question, drawImage draws (writes) an image onto a canvas element. The mapping is fine, since You only need to make sure You have a spherical photo, otherwise it will get stretched all over the model.