rezoner / CanvasQuery

Canvas for 2d gamedevelopers. Out of box canvas, keyboard, mouse, events.
http://canvasquery.com
586 stars 52 forks source link

Different context #16

Closed bugwelle closed 11 years ago

bugwelle commented 11 years ago

Hello, I am really new to CanvasQuery, so I hope this isn't such a stupid question :)

(function (window, document, undefined) {
    /* Example code */
    var imagesData = window.imagesData;

    var game = {
        player: {
            found: []
        },
        setup: function () {
            this.layer = cq().framework(this, this);
            this.layer.appendTo("body");
        },
        loadImage: function (callback) {
            var imageObj = new Image();
            imageObj.onload = function() {
                if (callback) {
                    callback(imageObj);
                }
            };
            imageObj.src = imagesData[0].src;
        },
        createImage: function () {
            var self = this;
            this.loadImage(function (image) {
                self.layer.drawImage(image, 0, 0, self.layer.canvas.width, self.layer.canvas.height);
            });
        },
        onStep: function (delta) {
        },
        onRender: function () {
        },
        onResize: function (width, height) {
            /* resize canvas with window */
            this.canvas.width = width;
            this.canvas.height = height;

            /* Works first time. But not when resizing... I get: '...has no method 'createImage'' */
            this.tempContext.createImage();

        },

        onMouseUp: function (x, y) {
            console.log(x, y)
        }
    };

    game.setup();

}(window, document));

My problem is, that onResize() calls createImage() when initializing, but not when resizing. How do I call createImage() inside of onResize() correctly?

Greeting form Germany, Andre

BTW: Huge thanks for CanvasQuery :+1:

rezoner commented 11 years ago

Hiya,

There is error in canvasquery.js code - it doesn't saves the context for events other than mouse. I have fixed it in 0.9 version which I will post in prerelease as soon as I get home.

I see you tried to workaround it by using this.tempContext so I am terribly sorry that you had to go inside the library source.

if you are looking for a quick fix just replace (in canvasquery.js onResize method)

var self = this;

with

var self = this.tempContext || this;

Will keep you informed,

Cheers from neighborhood Poland

2013/4/19 Andre Meyering notifications@github.com

Hello, I am really new to CanvasQuery, so I hope this isn't such a stupid question :)

(function (window, document, undefined) { /* Example code */ var imagesData = window.imagesData;

var game = {
    player: {
        found: []
    },
    setup: function () {
        this.layer = cq().framework(this, this);
        this.layer.appendTo("body");
    },
    loadImage: function (callback) {
        var imageObj = new Image();
        imageObj.onload = function() {
            if (callback) {
                callback(imageObj);
            }
        };
        imageObj.src = imagesData[0].src;
    },
    createImage: function () {
        var self = this;
        this.loadImage(function (image) {
            self.layer.drawImage(image, 0, 0, self.layer.canvas.width, self.layer.canvas.height);
        });
    },
    onStep: function (delta) {
    },
    onRender: function () {
    },
    onResize: function (width, height) {
        /* resize canvas with window */
        this.canvas.width = width;
        this.canvas.height = height;

        /* Works first time. But not when resizing... I get: '...has no method 'createImage'' */
        this.tempContext.createImage();

    },

    onMouseUp: function (x, y) {
        console.log(x, y)
    }
};

game.setup();

}(window, document));

My problem is, that onResize() calls createImage() when initializing, but not when resizing. How do I call createImage() inside of onResize() correctly?

Greeting form Germany, Andre

BTW: Huge thanks for CanvasQuery [image: :+1:]

— Reply to this email directly or view it on GitHubhttps://github.com/rezoner/CanvasQuery/issues/16 .

Rezoner Sikorski HTML5 Gamedeveloper http://rezoner.net

rezoner commented 11 years ago

this.createImage

as this will mean your game object after that patch

2013/4/19 Przemys³aw Sikorski rezoner1337@gmail.com

Hiya,

There is error in canvasquery.js code - it doesn't saves the context for events other than mouse. I have fixed it in 0.9 version which I will post in prerelease as soon as I get home.

I see you tried to workaround it by using this.tempContext so I am terribly sorry that you had to go inside the library source.

if you are looking for a quick fix just replace (in canvasquery.js onResize method)

var self = this;

with

var self = this.tempContext || this;

Will keep you informed,

Cheers from neighborhood Poland

2013/4/19 Andre Meyering notifications@github.com

Hello, I am really new to CanvasQuery, so I hope this isn't such a stupid question :)

(function (window, document, undefined) { /* Example code */ var imagesData = window.imagesData;

var game = {
    player: {
        found: []
    },
    setup: function () {
        this.layer = cq().framework(this, this);
        this.layer.appendTo("body");
    },
    loadImage: function (callback) {
        var imageObj = new Image();
        imageObj.onload = function() {
            if (callback) {
                callback(imageObj);
            }
        };
        imageObj.src = imagesData[0].src;
    },
    createImage: function () {
        var self = this;
        this.loadImage(function (image) {
            self.layer.drawImage(image, 0, 0, self.layer.canvas.width, self.layer.canvas.height);
        });
    },
    onStep: function (delta) {
    },
    onRender: function () {
    },
    onResize: function (width, height) {
        /* resize canvas with window */
        this.canvas.width = width;
        this.canvas.height = height;

        /* Works first time. But not when resizing... I get: '...has no method 'createImage'' */
        this.tempContext.createImage();

    },

    onMouseUp: function (x, y) {
        console.log(x, y)
    }
};

game.setup();

}(window, document));

My problem is, that onResize() calls createImage() when initializing, but not when resizing. How do I call createImage() inside of onResize() correctly?

Greeting form Germany, Andre

BTW: Huge thanks for CanvasQuery [image: :+1:]

Reply to this email directly or view it on GitHubhttps://github.com/rezoner/CanvasQuery/issues/16 .

Rezoner Sikorski HTML5 Gamedeveloper http://rezoner.net

Rezoner Sikorski HTML5 Gamedeveloper http://rezoner.net

bugwelle commented 11 years ago

Thanks for the fast answer :) :+1: