Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Background Image #7

Open
syedrazanaqvi opened this issue Aug 26, 2015 · 1 comment
Open

Background Image #7

syedrazanaqvi opened this issue Aug 26, 2015 · 1 comment

Comments

@syedrazanaqvi
Copy link

I was trying to add background image to your awesome script but not successful can you please help me ?

I want full screen size background image on created canvas.
Thanks

@jmp1548
Copy link

jmp1548 commented Dec 30, 2017

I know it has been 2 years and this probably no longer applies to you, but I was able to use this with my own background image.

When the clearContext is called I had it do this:

var img = new Image(); // Create new img element
img.src = insert link to image here;
var ptrn = mainContext.createPattern(img, 'repeat'); // Create a pattern with this image, and set it to "repeat".
mainContext.globalAlpha = 0.4;
mainContext.fillStyle = ptrn;
mainContext.fillRect(0, 0, viewportWidth, viewportHeight);

This worked well for me. The only issue i noticed is that you can faintly see some of the previous particles on the canvas. To fix this, I would adjust the globalAlpha accordingly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants