Displaying image from Javascript to Processing.js canvas

Question

So, I'm trying to programmatically add an image to my canvas, from a Javascript function :

    // Spawn function
    var spawnWrapper = function() {
        myCanvas = Processing.getInstanceById('mycanvas');
        // myCanvas.ellipse(50,50,50,50); // works fine here too
        myImage = myCanvas.loadImage('pegman.png');
        myCanvas.image(myImage,0,0);
    };

The same successive calls in console works : Also, there are no errors mentioned on the console.

I'm really stuck there and would appreciate any help ;-)

sspboyd · Accepted Answer · 2018-09-28 14:50:55Z

1

I suspect that you might be missing the preload directive.

This directive regulates image preloading, which is required when using loadImage() or requestImage() in a sketch. Using this directive will preload all images indicated between quotes, and comma separated if multiple images are used, so that they will be ready for use when the sketch begins running.

I hope that helps. I'm curious as to why you're using processing.js instead of P5.js?

Good luck.

answered Sep 28, 2018 at 14:50

sspboyd

3795 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lapin-Blanc Over a year ago

Actually, you're right about everything. I've first used processing.js instead of P5.js because this is the one I've used for learning. Btw, looking further, I found P5.js which is waaay easier to integrate with JS and also spotted the preload directive for me... Thx !

Collectives™ on Stack Overflow

Displaying image from Javascript to Processing.js canvas

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related