<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Canvas createPattern Video Proof of Concept - c ... thanks to https://books.google.com.au/books?id=IxhnNqaaW_IC&pg=PA183&dq=canvas+createPattern+video+example&hl=en&sa=X&ved=0ahUKEwjIkvP5hKjpAhUXzjgGHWmgA7cQ6AEIKDAA#v=onepage&q=canvas%20createPattern%20video%20example&f=false</title>
<body>
<h1>Canvas createPattern Video Proof of Concept</h1>
<h3>Canvas createPattern Video Proof of Concept</h3>
<h4>Thanks to <a target=_blank title='The Definitive Guide to HTML5 Video' href='//books.google.com.au/books?id=IxhnNqaaW_IC&pg=PA183&dq=canvas+createPattern+video+example&hl=en&sa=X&ved=0ahUKEwjIkvP5hKjpAhUXzjgGHWmgA7cQ6AEIKDAA#v=onepage&q=canvas%20createPattern%20video%20example&f=false'>The Definitive Guide to HTML5 Video</a></h4>
<table style=width:100%;>
<tr><th style='text-align:left;border:1px solid green;background-color:yellow;'>Video <font size=1>... <a style='cursor:pointer;text-decoration:underline;' onclick='video.click();'>click video below to see it played in Canvas</a> ...</font></th><th style='text-align:left;border:1px solid green;background-color:pink;'>Canvas <select onchange='rep=scratchit(this.value);'><option value='repeat'>Repeat</option><option value='no-repeat'>No Repeat</option></select> W <input style='width:40px;' type=number onblur='iwis=eval(this.value); scratch.width=iwis; if (iwis > wis) { wis=iwis; canvas.width=wis; }' onchange='iwis=eval(this.value); scratch.width=iwis; if (iwis > wis) { wis=iwis; canvas.width=wis; }' value='108' min=0 step=1></input> x H <input style='width:40px;' type=number onblur='ihis=eval(this.value); scratch.height=ihis; if (ihis > his) { his=ihis; canvas.height=his; }' onchange='ihis=eval(this.value); scratch.height=ihis; if (ihis > his) { his=ihis; canvas.height=his; }' value='192' min=0 step=1></input></th></tr>
<tr><td style='background-color:#f0f0f0;'>
<video data-style=display:none; controls>
<source src=ants_reversed.mp4 type=video/mp4>
</video>
</td><td style='vertical-align:top;background-color:#f7f7f7;'>
<canvas width=540 height=960 style="border:1px solid transparent;float:top;"></canvas>
<canvas id=scratch width=108 height=192 style="display:none;border:1px solid black;float:top;"></canvas>
</td></tr>
</table>
<script type='text/javascript'>
var wis=540, his=960; // 1080 x 1920
var iwis=108, ihis=192;
var rep='repeat';

window.onload = function() {
initCanvas();
}
var context, sctxt, video;

function scratchit(inr) {
if (('' + inr).toLowerCase().indexOf('no-') == 0) {
scratch.width = eval('' + iwis);
scratch.height = eval('' + ihis);
}
return inr;
}

function initCanvas() {
video = document.getElementsByTagName("video")[0];
canvas = document.getElementsByTagName("canvas")[0];
context = canvas.getContext("2d");
scratch = document.getElementById("scratch");
sctxt = scratch.getContext("2d");
video.addEventListener("play", paintFrame, false);
if (video.readyState >= video.HAVE_METADATA) {
startPlay();
} else {
video.addEventListener("loadmetadata", startPlay, false);
}
}

function startPlay() {
video.play();
}

function paintFrame() {
sctxt.drawImage(video, 0, 0, scratch.width, scratch.height);
pattern = context.createPattern(scratch, rep);
context.fillStyle = pattern;
context.fillRect(0, 0, wis, his);
if (video.paused || video.ended) {
return;
}
setTimeout(function () {
paintFrame();
}, 10);
}
</script>


</body>
</html>