$(window).load(function(){
$("#i").attr({"src":"http://intranet.pentalog.fr/inp/"});
  $("#myCanvas").css({"height":$("#i").attr("height")});
  
  	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
  $("#but").click(function(){
    
        if($("#myCanvas").is(":hidden"))
          {
    $("#myCanvas").show();
  	var i=0;
 	ctx.fillStyle="rgba(255,255,255,0.1)";
  	var interval1=setInterval(function(){
    ctx.clearRect(i-1,i-1,150,75);
    ctx.fillRect(i,i,100,75);
    i=i+1;
    if(i>53)
      clearInterval(interval1);
    },50);
      }
      else{
      $("#myCanvas").hide();
        ctx.clearRect(0,0,1000,1000);
	}
                  });
});

Setting Validate Copy Format

#mycanvas{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  background-color:rgba(0,0,0,0.1);
  display:none;
}

#but{
  position:absolute;
  bottom:40;
  right:0;
}

Setting Validate Copy Format