Canvas hide on click

by maitrekaio

HTML

<div id="container">
    <canvas id="mycanvas" width="300" height="200"></canvas>
</div>

CSS

#container{
    background:url(http://placehold.it/300x200);
    width: 300px;
    height: 200px;
}

JavaScript

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var container = document.getElementById("container");
    
var cat= new Image();
cat.onload = function() {
    context.drawImage(cat, 0, 0);
    container.addEventListener("click", clickHandler, false);
}
cat.src = "http://placekitten.com/300/200";

function clickHandler(event) {
    if (canvas.style.display == "") {
        canvas.style.display = "none";
    }
    else {
        canvas.style.display = "";      
    }
}