<template id="mytemplate">
<content></content><br><canvas width="400" height="300" id="draw"></canvas>


</template>
<script>
(function() {
    var myPrototype = Object.create(HTMLElement.prototype);
    var myDocument = document.currentScript.ownerDocument;

    myPrototype.createdCallback = function() {
        var shadow = this.createShadowRoot();
        var template = myDocument.querySelector("#mytemplate");
        var clone = document.importNode(template.content, true);
        shadow.appendChild(clone);
    }



    var MyElement = document.registerElement('my-draw', {
        prototype: myPrototype
    });

}());
</script>
<script>


    var mtd280 = mtd280 || {};

    mtd280.module = (function($) {

        // private
        var ctx,
            drawing;

        function mDown() {
            var r,g,b;

            r = ~~(Math.random() * 255); //~~ = Math.floor()
            g = ~~(Math.random() * 255);
            b = ~~(Math.random() * 255);
            ctx.fillStyle = ctx.strokeStyle = 'rgb('+ [r,g,b].join(',')+')';

            drawing = true;
        }

        function mUp() {
            drawing = false;
        }
        function mMove(event) {
            if (drawing) {
                ctx.beginPath();
                ctx.arc(
                    event.clientX - this.offsetLeft,
                    event.clientY - this.offsetTop,
                    5,0,Math.PI*2,true);
                ctx.fill();
            }
        }

      //------------------//
        function init() {
      //------------------//

            ctx = document.querySelector("my-draw").shadowRoot
        .querySelector("#draw").getContext('2d');
            drawing = false;

            ctx.canvas.onmousedown = mDown;
            ctx.canvas.onmouseup = mUp;
            ctx.canvas.onmousemove = mMove;



             //while (true) { console.log("Hello"); }

        };

        document.addEventListener('DOMContentLoaded',init);

        // public
        return {};

    }($));
    </script>