demos-canvas.html

---
layout: default
---

<h2>Video cover</h2>
<div class="cssc-grid fluid-grid">
    <div class="col-40p">
        <canvas id="main-canvas">
        <video id="main-video" src="assets/videos/big_buck_bunny.ogg" loop></video>
        </canvas>
    </div>
    <div class="col-60p">
        <script class="script-visible" contenteditable>window.domReady(function(){
    var dkcanv = new dkJSUCanvas($_('main-canvas'));
    dkcanv.coverVideo();
    $_('main-video').play();
});
</script>
        <button onclick="new dkJSUGetUserMedia($_('main-video'));return false;">Webcam ?</button>
    </div>
</div>

<h2>Image cover</h2>
<div class="cssc-grid fluid-grid">
    <div class="col-40p">
        <canvas id="image-canvas"><img src="assets/img/slider0.jpg" alt="" /></canvas>
    </div>
    <div class="col-60p">
        <script class="script-visible" contenteditable>window.domReady(function(){
    var dkcanv = new dkJSUCanvas($_('image-canvas'));
    dkcanv.coverImage();
});
</script>
    </div>
</div>

<h2>Image cover with effect</h2>
<div class="cssc-grid fluid-grid">
    <div class="col-40p">
        <canvas id="image-canvas-effect"><img src="assets/img/slider1.jpg" alt="" /></canvas>
    </div>
    <div class="col-60p">
        <script class="script-visible" contenteditable>window.domReady(function(){
    var dkcanv = new dkJSUCanvas($_('image-canvas-effect'), {
            callback: function(self){
                self.applyFilter('grayscale');
                self.applyFilter('brightness', 50);
            }
        });
    dkcanv.coverImage();
});
</script>
    </div>
</div>