How can we make SVG transparent on canvas?

How can we achieve this?

I got SVG in a function, how can I make it transparent on top of the canvas ?? Currently, I have all of my functions working on canvas. But I found that SVG can perform the function of adding and removing. How can i do this?

function Add() {
    var id = Math.floor(Math.random()*101+1);
        x = Math.random() * 550;
        y = Math.random() * 250;
    if (document.getElementById('amount').value < 50){
        document.getElementById('amount').value++;
        svg = document.getElementById("main");


        // construct uniqueid for the images
        uniqueid = "frog" + document.getElementById('amount').value;

        //namespaces for SVG
        svgNS="http://www.w3.org/2000/svg";
        xlinkNS="http://www.w3.org/1999/xlink";

        // create a image element
        image = document.createElementNS(svgNS, 'image');

        // set id and other attributes
        image.setAttributeNS(null, "id", uniqueid);
        image.setAttributeNS(xlinkNS, "href","jef-frog.gif");
        image.setAttributeNS(null, "x", x);
        image.setAttributeNS(null, "y", y);
        image.setAttributeNS(null, "width", "50");
        image.setAttributeNS(null, "height", "50");

        // append to svg
        svg.appendChild(image);

    } else {
        alert("we got 50");
    }
}