Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different context #16

Closed
bugwelle opened this issue Apr 19, 2013 · 3 comments
Closed

Different context #16

bugwelle opened this issue Apr 19, 2013 · 3 comments

Comments

@bugwelle
Copy link

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 👍

@rezoner
Copy link
Owner

rezoner commented Apr 19, 2013

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: 👍]


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

Rezoner Sikorski
HTML5 Gamedeveloper
http://rezoner.net

@rezoner
Copy link
Owner

rezoner commented Apr 19, 2013

  • if you fix it then just use

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: 👍]

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

Rezoner Sikorski
HTML5 Gamedeveloper
http://rezoner.net

Rezoner Sikorski
HTML5 Gamedeveloper
http://rezoner.net

@bugwelle
Copy link
Author

Thanks for the fast answer :)
👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants