Toggle Image to Canvas and Canvas to Image

Curious to know how to remove and get colour from the image. check out attuts.com for the full tutorial article.

by abdul quadir

HTML

<div class="container">
    <img src="http://www.attuts.com/wp-content/uploads/2015/01/attus.jpg" alt="source: fashionara.com" width="500" height="494" id="imgEle" />
    <div id="tag">Image</div>
</div>
<div>
    <button id="btn">Edit Me</button>
</div>

CSS

#btn {
    height:40px;
    color:white;
    background:green;
    width:500px;
}
.container {
    position:relative;
    width:500px;
    height:494px;
}
#tag {
    position:absolute;
    right:0px;
    top:20px;
    background:black;
    color:white;
    padding:10px;
    min-width:80px;
    text-align:center;
}

JavaScript

// get Full tutorial on attuts.com - how to remove and get color from the image. 

var imgObj; 
var canvasObj;
var toggleButton = false // toggling bottom button action
$("#btn").click(

function (e) {
    if (!toggleButton) {
       imgObj = document.getElementById('imgEle');
        toggleButton = true;
        $(imgObj).remove();
        $(".container").append($("<canvas id='canEle' width='500' height='494'></canvas>"));
        canvasObj = document.getElementById("canEle");
        var ctx = canvasObj.getContext("2d");
        ctx.drawImage(imgObj, 0, 0); // drawing image into canvas
        $("#btn").text('finish Editing');
        $("#tag").text("Canvas");
    } else {
        toggleButton = false;
        $(".container").append($('<img width="500" height="494" id="imgEle" />'));
        document.getElementById("imgEle").src = canvasObj.toDataURL('image/png'); // transfer canvas data to img
        $(canvasObj).remove();
        $("#btn").text('Edit Me');
        $("#tag").text("Image");
    }

});