Can't use line() and loadPixels()

function setup() {
	let c = createCanvas(600, 600);
	c.parent('canvasParent');
	pixelDensity(1);
	background(255);
	loadPixels();
}

function mouseDragged() {
	if(mouseButton == LEFT)
	{
		strokeWeight(30);
		stroke(200, 100, 50, 255);
		line(mouseX, mouseY, pmouseX, pmouseY);
	}

}
function mouseReleased() 
{
	loadPixels();
}

This is the code, no matter what I do the pixels array is always filled only with (255,255,255,255).
if I try to updatePixels() it resets my canvas

1 Like

I’m not sure what you’re expecting. When I run this code I can draw pixels to the screen:

What do you expect the loadPixels() function to do by itself? Can you please post a MCVE that demonstrates the problem?

1 Like

I am planning to do a flood-fill algorithm for my paint application.
I want the pixel array to be updated to the lastest line drawn so I could work on it with my flood fill function.
However, when I draw a line and log the pixel array to the console, the pixel array is not updated with the line and only the values 255 appear in the array (the line is 200, 100, 50, 255).

function setup() {
	let c = createCanvas(600, 600);
	c.parent('canvasParent');
	pixelDensity(1);
	background(255);
	loadPixels();
}

function mouseDragged() {
	if(mouseButton == LEFT)
	{
		strokeWeight(30);
		stroke(200, 100, 50, 255);
		line(mouseX, mouseY, pmouseX, pmouseY);
	}

}
function mouseReleased() 
{
	loadPixels();
	console.log(pixels)
}
1 Like

You have an extra call to loadPixels() in your setup() function. Removing it seems to fix your problem.

I’m not sure why this is the case. You might look through the P5.js source code to figure it out.

Also note that you can use the get() function to get the color at a specific point.

Doesn’t solve my problem unfortunately

I’m not sure. It works fine for me. The only other difference is that I removed the c.parent('canvasParent'); line.