canvas in canvas not displayed when requirejs structure used

Question

I have a problem that is driving me insane.

I have something that works perfectly fine in one javascript file, but completely fails when using it with requirejs.

(function(){
define([], function (){
    var Sprite = function(){
        return {
            spritesheet:    null,
            canvas:         null,
            context:        null,

            init: function(src, ctx){
                this.canvas = document.createElement('canvas');
                this.context = this.canvas.getContext('2d');
                this.context.drawImage(src, 0, 0, 10, 20, 0, 0, 10, 20);
                ctx.drawImage(this.canvas, 100, 100);
            }
        };
};

return Sprite;
});
}
)();

And in other file I have:

(function(){
define(["r", "sprite", "player"], function (Ra, Sprite, Player){
    var Game = function()
    {
        return {
            ...SOME STUFF HERE...
            canvas: null,
            context: null,

            something: function() {
                this.canvas = document.getElementById("game");
                this.canvas.width = 500;
                this.canvas.height = 500;
                this.context = this.canvas.getContext("2d");

                var sprite = new Sprite();
                sprite.init("image.gif", this.context);
         };
     };

     return Game;
});
}
)();

I tried to compact the code as much as I can, I hope I didn't cut out anything important, but that is basically the part that is not working. I am also fairy new to requirejs so if I am doing something incredibly wrong, please tell me.

No matter what I do, everything seems to be fine, both canvases are created, all have the right properties, but the second one I am putting on the first one is not displayed. If I put plain image instead of canvas it works just fine, but canvas on canvas does not.

This drives me nuts, I tried so many possibilities, the code works just fine without all the requirejs stuff, but fails when I structure it that way. Does it have something to do with global scopes? How to make this work? I need canvas inside canvas.

Thank you for your time!

EDIT:

I have only <script data-main="main" src="libs/require/require.js"></script> loaded in my html file and <canvas id="game"></canvas> in body.

Then in main.js I have:

require.config({ 
baseUrl: "./modules",
waitSeconds: 10,
packages: [
    {
        name: "something not used yet",
        location: "something not used yet",
        main: "something not used yet"
    }
]
});

require(['game'], function (Game)
{
    var game = new Game();
    game.begin();
});

Rest I already showed in the beginning.

I have main.html and main.js together in the build folder and all the others in build/modules folder.

Answer 1

Problem was the most ridiculous thing ever and I wasted way to much time to figure out something this obvious...

For some reason I completely forgot to wait for the image to load and kept using it before it is even loaded, and the complicated (for me at least) structure when using requirejs made it hard to pinpoint that mistake.

Also without requirejs the code worked because image loaded so fast, it was ready before the next function started even without onload, however when I switched to requirejs I guess it either slowed down, or the asynchronous nature of it created the problem.

Anyway, solved by simple onload handler.