Accessing the pixel array of a sketchpad trial with background image

[HenningTm]

I've loaded a sketchpad trial with a background image. What I want to do now is to get the pixel value of the pixel that is being clicked.
I've adjusted the background loading function the following way (After "//Get pixel array"):

add_background_image() {
    return new Promise((resolve, reject) => {
        if (this.params.background_image !== null) {
            this.background_image = new Image();
            this.background_image.src = this.params.background_image;
            this.background_image.crossOrigin = 'Anonymous';
            this.background_image.onload = () => {
                this.ctx.drawImage(this.background_image, 0, 0);
                resolve(true);
            };

          //Get pixel array
          this.ctx = this.sketchpad.getContext("2d");
          this.imageData = this.ctx.getImageData(0, 0, this.params.canvas_width, this.params.canvas_height);
          this.pixelArray = this.imageData.data;
        }
        else {
            resolve(false);
        }
    });
}

I then adjusted the start_draw function so that it only logs the current pixel value and doesnt draw anything:

start_draw(e) {
          const x = Math.round(e.clientX - this.sketchpad.getBoundingClientRect().left);
          const y = Math.round(e.clientY - this.sketchpad.getBoundingClientRect().top);
        console.log(x,y);
        let pix_idx = (y * this.params.canvas_width + x) * 4;
        console.log(pix_idx);
        console.log(this.pixelArray.slice(pix_idx, pix_idx+4));
      }

Using these adjustments, however, always gives me white pixels (i.e., [255,255,255,255]), even when I am clearly clicking on a black part of the background.

What am I doing wrong here? Should I fetch the pixel array at a different time?

Thanks in advance!

[jodeleeuw]

Hi @HenningTm

I think the pixelArray should be updated after the onload event finishes for the background image.

this.background_image.onload = () => {
                this.ctx.drawImage(this.background_image, 0, 0);
    	        //Get pixel array
                this.ctx = this.sketchpad.getContext("2d");
                this.imageData = this.ctx.getImageData(0, 0, this.params.canvas_width, this.params.canvas_height);
                this.pixelArray = this.imageData.data;
                resolve(true);
            };

The imageData doesn't update until this.ctx.drawImage is called.

[HenningTm]

Thank you! Now it works.