new Image()對(duì)象(src="*.png")怎么讓png圖片空白區(qū)域呈透明?

現(xiàn)在需要給canvas的drawImage(img,dx,dy)方法傳遞一個(gè)image對(duì)象, 供其畫(huà)圖用.
但是它默認(rèn)畫(huà)出來(lái)的圖片, 周邊本來(lái)是透明的區(qū)域, 默認(rèn)填充了白色.
如下是圖片源:

繪制完成后的效果:

效果圖中, 上下兩個(gè)圓圈的邊角區(qū)域明顯填充了不透明的白色, 從而遮住了下一層的圓圈.
周邊馬賽克區(qū)域, 需要畫(huà)出來(lái)后是透明的, 而不是填充了白色
請(qǐng)問(wèn), 這種需求怎么實(shí)現(xiàn)呢?

部分代碼

新建image對(duì)象, 最終會(huì)給canvas作圖

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