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

        myPrototype.createdCallback = function() {
            let shadow = this.createShadowRoot();

            let canvas = document.createElement("CANVAS");
            canvas.setAttribute("width", "400");
            canvas.setAttribute("height", "300");
            let ctx = canvas.getContext('2d');
            let drawing = false;

            shadow.appendChild(canvas);

            function mDown() {
                let r,g,b;
                r = Math.floor(Math.random() * 255);
                g = Math.floor(Math.random() * 255);
                b = Math.floor(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();
                }
            }

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

        let MyElement = document.registerElement('drawing-canvas', {
            prototype: myPrototype
        });

    } () );
</script>