Cannot remove fullscreen image after make it displayed

JavaScript
1

I’ve an image that I want to toggle between full screen and its original size as the code below:
HTML


<img id='fullscreen_image' src='' /> <!-- I place it on top of everything -->

JS


var full = document.getElementById("fullscreen_image");
var origin = document.getElementById("origin");

function fullscreenImage(){
	full.style.position = 'absolute';
	full.style.display = 'block';
	full.width = window.innerHeight;
	full.height = window.innerWidth;
	full.src = 'original.png';
}
function removeFullscreenImage(){
	full.style.display = 'none';
}

origin.addEventListener('click', fullscreenImage, false);
full.addEventListener('click', removeFullscreenImage, false);

I want the fullscreen being removed when I click on it, especially on Chrome.
Thank you,

2

Edit: the codes work properly. But the block below doesn’t work.


function fullscreenImage(){
	full.style.position = 'absolute';
	full.style.display = 'block';
	full.width = window.innerHeight;
	full.height = window.innerWidth;
	full.src = 'imageData';
        requestAnimationFrame(fullscreenImage);
}

In this case I display animation images grabbing from a canvas.