I'm asking this as a follow-up to this question. I want to create a drawing app where the mouse is replaced by an ellipse that resizes to fit the brush size. The problem was that there was no way to draw the ellipse without leaving a mark on the canvas. The solution I came up with to solve this problem was to use createGraphics()
as a buffer object and render the cursor on top of it as such:
var brushSize = 60;
function setup() {
createCanvas(1080,720);
pg = createGraphics(1080, 720);
background(100);
noCursor();
}
function draw() {
pg.background(0,0,0,0);
pg.fill(255);
pg.noStroke();
pg.ellipse(mouseX/2,mouseY/2,brushSize);
image(pg, 0, 0);
}
function mouseDragged() {
noStroke();
fill(255);
ellipse(mouseX,mouseY,brushSize);
}
In my solution, I'm using createGraphics()
to span over the entire canvas, rendering its own background and then drawing an ellipse at the cursor location. In p5.js, background()
takes a fourth parameter that describes its alpha channel. I thought this would give me my desired effect and create a transparent background on the buffer which allows full visibility of the canvas without actually drawing to it. However, if I set the fourth parameter in pg.background()
to 0, the Graphics background doesn't render over the Graphics ellipse, which means the transparency is only relative to objects in the Graphics buffer.
I need some help in figuring out if there is any way to make the Graphics buffer transparent to the canvas and not to objects that render on the Graphics buffer itself. I know this explanation might be a little confusing so I drew up a little diagram to show what I mean: