Flipbook Codepen [top]

<!-- Page 1 (The Cover or Back) --> <div class="page"> <div class="front"> <p>Back Cover</p> </div> <div class="back"> <!-- Empty or End page --> </div> </div>

wrapper.addEventListener('touchstart', onDragStart, passive: false); window.addEventListener('touchmove', onDragMove, passive: false); window.addEventListener('touchend', onDragEnd); flipbook codepen

// main content style ctx.font = `500 $Math.floor(canvas.height * 0.06)px "Segoe UI", "Courier New", monospace`; ctx.fillStyle = '#3a2c1e'; ctx.shadowBlur = 0; !-- Empty or End page --&gt

// page header: small flipbook indicator ctx.font = `12px monospace`; ctx.fillStyle = '#b48b5a'; ctx.fillText(`✦ page $pageNumber ✦`, canvas.width - 70, 35); ctx.fillStyle = '#7c5e3c'; ctx.fillText(`flip·book`, 20, 35); ctx.fillStyle = '#3a2c1e'