How does the new Image () object (src= "* .png") make the white space of the png image transparent?

now you need to pass a image object to the drawImage (img,dx,dy) method of canvas for drawing.
but the picture it draws by default has a transparent area around it and is filled with white by default.
is the image source as follows:

in the effect picture, the corners of the upper and lower circles are obviously filled with opaque white, thus covering the next layer of circles.
the surrounding mosaic area needs to be transparent instead of filled with white
excuse me, how can this requirement be realized?

< H2 > part of the code < / H2 >

create a new image object, and eventually draw a graph for canvas

var image = new Image();
image.src = "../img/mubiao.png";
...
var ctx = canvas.getContext("2d");
ctx.drawImage(image,dx,dy);

Transparent javascript html picture canvas

Mar.02,2021

does not understand what your transparency means. It is because it is transparent that I see the white background

. It cannot be reproduced, and the transparent part will not be filled with white automatically. Suggest giving an online code.
in addition, I suspect that the image you saved may not be in png, format, so the transparent parts will be automatically filled with white when exported from ps.

[problem basically solved]
the four white corners of the picture are not caused by canvas's drawImage (img,.) , nor is it because the image itself is opaque (png format, the four corners are indeed transparent). but before drawing, a rectangular area may be filled by default, and then image.
so lz adopts a clumsy method: set the length and width of the rectangular area to be very small before drawing, at least less than the width and height of the image to be drawn .
finally, this is really feasible.

Previous: Statements in and out of function

Next: Mobile preview pdf