Page Flip Demo: Links & Input Elements "Unclickable"!

The standard Page Flip Demo does not allow links and input elements displayed on the canvas to be clicked. Is there a fix available?

by indieweb

HTML

<body>
		<div id="book">
			<canvas id="pageflip-canvas"></canvas>
			<div id="pages">
                <section>
					<div>
						<h2>Test Page</h2>
						<p>This demo is fantastic, apart from the fact that link and input elements aren't supported. The canvas element and JS on which the entire magic relies, renders both "unclickable" - a major drawback. See below:</p>
                        <p><a href="#">Click me!</a></p>
                        <p><input type="text"></input></p>
                    </div>
                </section>
				<section>
					<div>
						<h2>History</h2>
						<p>Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari browser. Later, it was adopted by Gecko browsers and Opera and standardized by the WHATWG on new proposed specifications for next generation web technologies.</p>
					</div>
				</section>
				<section>
					<div>
						<h2>Usage</h2>
						<p>Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.</p>
					</div>
				</section>
				<section>
					<div>
						<h2>Reactions</h2>
						<p>At the time of its introduction the canvas element was met with mixed reactions from the web standards community. There have been arguments against Apple's decision to create a new proprietary element instead of supporting the SVG standard. There are other concerns about syntax e.g. the absence of a namespace.</p>
					</div>
				</section>
				<section>
					<div>
						<h2>Support</h2>
						<p>The element is currently supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera. It is not natively implemented by Internet...

CSS

body, h2, p {
	margin: 0;
	padding: 0;
}

body {
	background-color: #444;
	color: #333;
	font-family: Helvetica, sans-serif;
}

#book {
	background: url("https://dl.dropboxusercontent.com/u/3799114/page-flip-demo/book.png") no-repeat;
	position: absolute;
	width: 830px;
	height: 260px;
	left: 50%;
	top: 50%;
	margin-left: -400px;
	margin-top: -125px;
}

#pages section {
	background: url("https://dl.dropboxusercontent.com/u/3799114/page-flip-demo/paper.png") no-repeat;
	display: block;
	width: 400px;
	height: 250px;
	position: absolute;
	left: 415px;
	top: 5px;
	overflow: hidden;
}
	#pages section>div {
		display: block;
		width: 400px;
		height: 250px;
		font-size: 12px;
	}
	#pages section p,
	#pages section h2 {
		padding: 3px 35px;
		line-height: 1.4em;
		text-align: justify;
	}
	#pages section h2{
		margin: 15px 0 10px;
	}

#pageflip-canvas {
	position: absolute;
	z-index: 100;
}

JavaScript

(function() {
	
	// Dimensions of the whole book
	var BOOK_WIDTH = 830;
	var BOOK_HEIGHT = 260;
	
	// Dimensions of one page in the book
	var PAGE_WIDTH = 400;
	var PAGE_HEIGHT = 250;
	
	// Vertical spacing between the top edge of the book and the papers
	var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
	
	// The canvas size equals to the book dimensions + this padding
	var CANVAS_PADDING = 60;
	
	var page = 0;
	
	var canvas = document.getElementById( "pageflip-canvas" );
	var context = canvas.getContext( "2d" );
	
	var mouse = { x: 0, y: 0 };
	
	var flips = [];
	
	var book = document.getElementById( "book" );
	
	// List of all the page elements in the DOM
	var pages = book.getElementsByTagName( "section" );
	
	// Organize the depth of our pages and create the flip definitions
	for( var i = 0, len = pages.length; i < len; i++ ) {
		pages[i].style.zIndex = len - i;
		
		flips.push( {
			// Current progress of the flip (left -1 to right +1)
			progress: 1,
			// The target value towards which progress is always moving
			target: 1,
			// The page DOM element related to this flip
			page: pages[i], 
			// True while the page is being dragged
			dragging: false
		} );
	}
	
	// Resize the canvas to match the book size
	canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
	canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
	
	// Offset the canvas so that it's padding is evenly spread around the book
	canvas.style.top = -CANVAS_PADDING + "px";
	canvas.style.left = -CANVAS_PADDING + "px";
	
	// Render the page flip 60 times a second
	setInterval( render, 1000 / 60 );
	
	document.addEventListener( "mousemove", mouseMoveHandler, false );
	document.addEventListener( "mousedown", mouseDownHandler, false );
	document.addEventListener( "mouseup", mouseUpHandler, false );
	
	function mouseMoveHandler( event ) {
		// Offset mouse position so that the top of the book spine is 0,0
		mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH / 2 );
		mouse.y = event.clientY -...