Edit in JSFiddle

$(function() {
    $.cloudinary.config({ cloud_name: 'christekh', api_key: '874837483274837'})
    var uploadButton = $('#upload-button');
    var canvas = $('#canvas');
    uploadButton.on('click', function(e){
        cloudinary.openUploadWidget({ cloud_name: 'christekh', upload_preset: 'idcidr0h'}, 
        function(error, result) { 
            var id = result[0].public_id;
            canvas.html(procesImage(id));
        });
    });

    function procesImage(id){
        // Get a random mustache image from
        var movembers = ["movember3_oabbz1", "movember2_mc2zrb", "movember_qimgkg"];
        var random = Math.floor(Math.random() * movembers.length);
        var randomMovember = movembers[random];
        var options = {
            // Transformation option
            transformation: 
                [
                    // Specify desired width
                    {width: 400},
                    // Check if faces (if faces >= 1)
                    {if: "faces_gte_1"},
                    // Add movember image.
                    // Movember will be placeed right
                    // in the middle of the face so we can push 
                    // it down a little bellow the nose
                    {overlay: randomMovember, width: 1.1, flags: "region_relative", gravity: "faces", x:0, y:50},
                    // If the image is not a face
                    {if: "else"},

                    // drop the movember at the 
                    // down-right section of the image
                    {overlay: randomMovember, width: 100, gravity: "south_east"},
                    // End if statement
                    {if: "end"},
                    // Add a border and a border-radius
                    {border: "7px_solid_grey", radius: 30}
                ]
            };
            // Return image with the options
            // Image is returned in an image tag
            // and not as a URL
        return $.cloudinary.image(id, options);
    }
     
});
        <!-- Container for both form and loader -->
        <div class="container" id="container">
            <h1>Movember</h1>
            <div class="content">
                <p>Upload a selfie to get a mustache for free 😁</p>
                <!-- Upload button -->
                <button id="upload-button" class="btn">Take or Upload a Selfie</button>
                <div class="paint_container" id="canvas">
                    <!-- Canvas to drop image after processing -->
                </div>
                <img src="http://res.cloudinary.com/christekh/image/upload/v1477472034/image_nqsvkq.png" alt="" class="powered">
            </div>
           
        </div>
.container{
    border: 2px solid #e1e1e1;
    width: 70%;
    margin: auto;
    margin-top: 5em;
    text-align: center;
    padding-top: 5em;
    padding-bottom: 5em;
    position: relative;
}

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  outline: none;
  border: none;
  margin-bottom: 15px;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.powered {
  position: absolute;
  bottom: 5px;
  right: 5px; 
}

External resources loaded into this fiddle: