Make canvas transparent (or how to include a background image)

p5.js Coding Questions
1

Hey everyone!
I am currently working on a webpage as a sort of late christmas present and I can not figure out the solution for a specific design problem. Since I am unexperienced with html/css stuff, I wanted to ask someone here, maybe there is an easy solution:
I want to have a background image which does not depend on its resolution, meaning that it will zoom in if width/height do not match the browser size, rather than distorting the image’s scale.
For this I found the following method:

function getBackgroundImage(pos, size, url) {
    let container = createDiv();
    container.position(pos.x - size.x/2, pos.y - size.y/2);
    container.size(size.x, size.y);
    let zoomedImage = createDiv();
    zoomedImage.elt.style.width = '100%';
    zoomedImage.elt.style.height = '100%';
    zoomedImage.elt.style.backgroundImage = 'url(' + url + ')';
    zoomedImage.elt.style.backgroundSize = 'cover';
    zoomedImage.elt.style.backgroundPosition = 'center';
    zoomedImage.elt.style.backgroundRepeat = 'no-repeat';
    zoomedImage.elt.style.filter = 'blur(10px)';
    zoomedImage.style('z-index', 0);
    zoomedImage.parent(container);
    container.style('z-index', 0);
    return container;
}

Note that backgroundSize = ‘cover’ achieves the desired effect.
Now my plan is to lay over my canvas with all the other drawings on it, where the background is only visible when there is nothing drawn on the canvas. I use the z-index for that:

function getCanvasContainer(){
    let container = createDiv();
    container.style('width', '100%');
    container.style('height', '100%');
    container.style('pointer-events', 'none');
    container.style('position', 'absolute');
    container.style('z-index', 1);
    container.style('top', 0);
    container.style('left', 0);
    return container;
}

For this purpose I thought I just leave out the background() call in draw() or input a transparent color value. However, since my canvas spans the whole screen, the result of that is a completly grey screen with my background image behind it, invisible :frowning:
I saw the post about creating a background image using loadImage() in the canvas, but then I would need to somehow implement the “zooming” adjustments on my own, as well as the blur effect and so on…
I also thought about having each drawn shape in its own small canvas but this seems very inefficient (eventhough it will probably work).
is there any convenient way of solving this by making the canvas transparent or something similar?
Thank you very much!

2

Hi! The canvas is normally transparent. Here’s a simple demo:

So I’m guessing you have a problem other than the transparency of the canvas. Could you provide a functional sketch (e.g., on web editor) that describes the problem so others can try without recreating your sketch?

3

alright, I guess clear() did the trick, I did not know about that :cold_sweat:
Thank you very much for the reply!

1 Like