We Keep Coding

How to get a screenshot/rendering of webgl canvas on a website that is not mine?

I'm trying to screenshot the contents of a canvas that uses webgl2.
It's from a game on a website that i didn't build myself.
I can get a screenshot with certain console commands but only if the game window is not visible, otherwise it's just a black screen.
From what i understand, this has to do with the drawing buffer being cleared after the render function that fills the canvas.
I'm currently trying to add my screenshot commands right after where that render function is called, in the hope that at this point the buffer will not be cleared.
However this code is in a big file compiled with webpack, and i'm not sure if/how i can reference that function from the console.
It seems they use PIXI for the rendering.
Any tips on how to override the part where the render function is called, so i can add my screenshot code there?
Or otherwise how to get the screenshot?

Export canvas on fabric.js to an image

I'm using fabric.js to make a draw and export the canvas to a .png without background. The thing is that I've been searching and this is the only thing that, in a way, makes sense to me:
document.getElementById("downloadbtn").onclick = saveImage();
function saveImage(c) {
this.href = canvas.toDataURL({
format: 'png',
quality: 0.8
});
this.download = 'testimage.png'
}
But it doesn't work... I've also tried a bunch of different stuff but the same thing happens:
Failed to execute toDataURL... error in the console.
Any helps? Ty

For those who had the same issue as me, the thing is:
You can save easily the canvas to an image, but you can't do it if you have an image inside the canvas, let me explain. If you have imported a nonlocal image into the canvas (like pasting an image with fromURL), the CORS of the web will detect this as a probable threat for the system, and will block the action.
For me, saving the canvas without the url image is fine, so I have no other solution for those who try to save the canvas with an external image, but maybe save first locally the image and then save it will work for you.
Hope it can help!

Render scene at lower resolution (three.js)

How can i decrease my rendered canvas resolution(just like i can do on blender camera resolution)? I've seen another question saying that i need to use
renderer.setDevicePixelRatio(window.devicePixelRatio)
The problem is that the object either gets black or nothing shows on canvas, so i don't really know if this is it solves my problem.
I also tried to use
renderer.setSize()
and
renderer.setViewport()
together and separately, but it only changed the canvas size to a very small one(i need a high size preview of the canvas), and even though the viewport got on the size i wanted, it seems that the objects are rendered only on the smaller size, so i can't see all of it, so it doesn't do the trick.
Also, if possible, is there a way to do that by manually changing the image buffer to a lower resolution one, and displaying it?

The thing i needed was the setPixelRatio function on therenderer. no setDevicePixelRatio.

Image not displaying in phaser 3

Recently I started making a game with Phaser 3.
I made an image player.png. Now comes the weird part. Whenever I try to display player.png it won't display on screen. Path, filename, console everything is correct. Code also has no errors. Now when I replaced the png image with another image. Surprise! It shows up. In fact any other image would be displayed other than player.png.
Please can anyone figure out why?

could be format issue. try opening your image in something like photoshop and save it again as png.

Is there any way to check whenever a canvas is completed or not?

I'm encountering a problem and I don't know how to solve it nor why it acts this way, so i'm looking for some help
I am currently working on a little application which :
1 - builds *.png together on a single canvas
2 - Apply some styles, colors
The current application was running "perfectly" : the final canvas was containing the full built image with the correct assets and we could see the result.
Today, I've decided to extract the base64 from the canvas to render an actual image. The problem is that that base64 extracted at the time t is not the same as the one which is contained by the canvas tag itself. As a result, the final rendering is not the same (some parts of the drawing are erased in the image meanwhile the final canvas is perfectly fine).
Here is the code which manages the drawing :
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
//images.forEach(function(child, index, array) {
// ctx.drawImage(picture, child.anchor.x, child.anchor.y, child.width, child.height);
//});
ctx.restore();
console.log(ctx.canvas.toDataURL("image/png"));
If I try to extract the base64 from the canvas at the very end with the Google Chrome Console and store it as the source of the destination image, it works fine too. Here is my question : is there any event that is fired when a canvas is fully ready to go ? Do I do it wrong by trying to extract the base64 after ctx.restore() ?
Thanks a lot for your help,
Friendly yours (and sorry for my horrible english)
EDIT 1 : I'm using a function that allows me to do some pre-rendering, that's why there is only the drawImage in the code above since pre-rendering is already done.

Thank you everyone for your comments ! I would like to apologize first for the horrible question which was really poor enounced...
Thanks to the Blindman67 I did find where was the problem. What I did not say earlier (because I thought that wasn't part of the problem) is that my program is also "replacing" colors by other colors. Because of this, it has to handle some more Image.load() callbacks to print the differents images with their final colors. It semt that one ore more load() function were not totally fullfied, resulting in an incomplete frame. I manage to change the export so that each callback manage to come to its end before trying to export the final image.
Thanks a lot everyone for your help :)