Search code examples
javascriptprocessingprocessing.js

Displaying image from Javascript to Processing.js canvas

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 : enter image description here Also, there are no errors mentioned on the console.

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

Solution

  • 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.