Cannot get texture() to work: "createTexture is not a function"

[birgitta410]

Hi,

I am having trouble using texture(). Below is a small example of what I am doing, this gets me "Uncaught TypeError: curContext.createTexture is not a function".

I also tried to call size() with a third parameter P.WEBGL, as I thought it might have something to do with the type of canvas that is initialized, 2D vs. 3D? But no change. Seems like passing that third argument does not change the type of context, in both cases I was seeing 2D drawing contexts when debugging, is that correct?

Also tried setting the different texture modes, e.g. textureMode(IMAGE), textureMode(NORMAL), no change.

Am I missing something, or is this a bug?

    var img;
    P.setup = function() {
        P.size(300, 300, P.P2D);
        P.background(255);
        img = P.loadImage('http://processingjs.org/images/header.png', 'png');
    };

    P.draw = function() {
        P.image(img, 0, 0); // Drawing img to make sure it's loaded properly

        P.beginShape();
        P.texture(img); // This fails
        P.vertex(110, 110);
        P.vertex(200, 110);
        P.vertex(200, 200);
        P.vertex(110, 110);
        P.endShape();

    };

Here's a fiddle: https://jsfiddle.net/c0j4Lok8/2/

It uses Processing 1.4.7, but I am experiencing the same in 1.4.8 and 1.4.13.

Thanks a lot, Birgitta

[birgitta410]

My "createTexture is not a function" error also happens when I use a file served from my own server, I just used the external image in the example to make it easier to reproduce the error for potential helpers.

[Pomax]

did you remember to put a /* @pjs preload="header.png" */ preload directive at the top of your sketch? Browsers can't synchronously load images, so we have to force-load them before the sketch starts, or you have to use the requestImage technique described over in the Processing API docs, where you check your image's dimensions during draw() until they're not 0, at which point the image will have finished loaded in. Without a preload directive, loadImage will yield a null object, so getting a "... is not a function" error would make sense.

[birgitta410]

Thanks for your answer. I have not added the preload directive, because I was not sure if that would work in the "pure JS" version that I am using. But to be honest, I also don't think that this is the problem. If you have a look at my fiddle (https://jsfiddle.net/c0j4Lok8/2/), you will see that I am drawing the image itself (not as texture) even before I call texture(), just to make sure loading it was not the issue.

The actual error seems to be an API error to me (you should see it on the console when you run the fiddle). It occurs on this line: https://github.com/processing-js/processing-js/blob/master/processing.js#L17250

When I debug, at this point the instance of curContext is a CanvasRenderingContext2D. That object does indeed not have a function "createTexture". That's why I suspected I might have to go into 3D mode, but could not get that to work either.

[Pomax]

yeah this is worth looking into, it feels like a p binding is lost somewhere so that the context ends up being a canvas instance instead of the sketch instance...

[greenred123]

I'm experiencing the same issue! Any developments on this?

[Pomax]

none yet (I'm in the middle of a move, and don't expect to have much free time for the next 2 weeks either)

[greenred123]

Thanks for the response - good luck with the move!

[aditya95sriram]

I am also experiencing the same issue, but this only seems to be a problem when working with P2D renderer and works fine with P3D. Unfortunately, I am forced to using P2D 😢 . Would be great to know if there is any workaround to this.

[Pomax]

It would be - please be aware that development has ground to a halt since the last message in this thread, and this repo is no longer under active maintenance. Please see https://github.com/processing-js/processing-js/blob/master/ISSUE_TEMPLATE.md

[aditya95sriram]

@Pomax Thanks a lot for letting us know 👍