multiplayer canvas effect

creating effect of canvas as css

by davidpenuelab

HTML

<div id="view-front">
    <div class="product-design">
        <img src="http://codedwebs.com/top.png" id="overlay">
        <div class="design-area">
            <div class="content-inner">
                <span class="art"><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" preserveAspectRatio="none" width="100" height="150" xmlns:xlink="http://www.w3.org/1999/xlink"><g><image x="0" y="0" width="100" preserveAspectRatio="none" height="150"...

CSS

.product-design{
        position: relative;
        border: 1px solid;
        height: 422px;
        width: 310px;
    }
    .product-design img{
        width: 300px;
    }
    #overlay,
    #bottom,
    .design-area{
        position: absolute;
    }
    #bottom{
        z-index: 1;
    }
    .design-area{
        z-index: 2;
        top:100px;
        left:80px;
        position: absolute;
        border: 1px dashed;
        width:140px;
        height:230px;
    }
    #overlay{
        z-index: 3;
        mix-blend-mode: multiply;
    }
    .art{
        position: absolute;
        top: 80px;
        left: 15px;
    }
    .content-inner{
        position: relative;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }
    .text{
        position: absolute;
        top:10px;
        left:10px;
    }

JavaScript

function drawStage(level)
    {
        var viewFront     = document.getElementById('view-front');
        var designArea    = document.getElementsByClassName('design-area')[0];
        var topImageId    = document.getElementById('bottom');
        var btmImageId    = document.getElementById('overlay');
        var svgItems      = designArea.getElementsByTagName('svg');
        var svgItemsArray = Array.prototype.slice.call(svgItems);


        var canvas     = document.getElementById('myCanvas');
        var context    = canvas.getContext('2d');
        context.globalCompositeOperation = 'difference';


        //top image
        var topImage = new Image;
        topImage.src = topImageId.src;
        topImage.onload = function () {
            context.drawImage(topImage,0,20, canvas.width, canvas.height)
        }

				//artwork and text
        svgItemsArray.forEach(function (element, index, array) {
            var artwrk = new Image;
            var xml = new XMLSerializer().serializeToString(element);
            var svg64 = btoa(xml);
            var b64Start = 'data:image/svg+xml;base64,';
            var image64 = b64Start + svg64;
            artwrk.src = image64;
            artwrk.onload = function () {
                canvas.getContext('2d').drawImage(artwrk, 200, 200);
            }
        });


        //bottom image
        var btmImage = new Image;
        btmImage.src = btmImageId.src;
        btmImage.onload = function () {
            context.drawImage(btmImage,0,0, canvas.width, canvas.height)
        }

    }


    var level = 1;
    drawStage(level);

    document.getElementById("button").onclick = function() {
        level = level >= 2 ? 1 : level + 1;
        //console.log(level);
        drawStage(level);
    }

    document.getElementById("download").onclick = function(){
        document.getElementById("download").download = "image.png";
        document.getElementById("download").href =...