У меня сложнее всего заставить холст рендерить поверх видео. Я предполагаю, что materializeCSS переопределяет некоторые из CSS, которые не позволяют это, независимо от моей CSS-позиции и размера.
Вот соответствующий HTML
<div class="row demo-frame">
<div class="col s12 demo-container">
<canvas id="canvas" class="left" width="600" height="450"></canvas>
<video id="video" class="left" width="600" height="450" autoplay muted></video>
</div>
</div>
И (соответствующий) JS:
var video = document.getElementById('video');
canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');