Enyo Canvas fullscreen background

a fullscreen background which scales live on resize

by joopmicroop

HTML

<script type="text/javascript">
    new App().renderInto(document.body);
</script>

CSS

.canvasController{
    width:100%;
    height:100%;
}

JavaScript

enyo.kind({
    name: 'App',
    kind: enyo.Control,
    components: [
        {
        kind: 'MainContentController'}
    ],
});
enyo.kind({
    name: 'MainContentController',
    kind: enyo.Control,
    style: 'width:100%; height:100%;',
    components: [
        {
        name: 'canvasController',
        kind: 'MainContentCanvas',
        },
        ],
    rendered: function() {
        this.inherited(arguments);
        this.resizeHandler();
    },
    resizeHandler: function() {
        this.inherited(arguments);
        this.$.canvasController.attributes.width = this.getComputedStyleValue('width');
        this.$.canvasController.attributes.height = this.getComputedStyleValue('height');
        this.$.canvasController.render();
    },
});
enyo.kind({
    name: "MainContentCanvas",
    kind: "enyo.Canvas",
    nodeTag: "canvas",
    canvas: "",
    context: "",
    published:{
        borderColor:'rgba(34, 31, 31, 1)',
        backgroundColor:'rgba(220, 220, 220, 1)',
    },
    attributes: {
        width: "200px",
        height: "200px"
    },
    rendered: function() {
        this.hasNode(); //Sets the node property of the rendered DOM node
        this.canvas = this.node;
        this.context = this.canvas.getContext('2d');
        this.contextWidth = parseInt(this.attributes.width);
        this.contextHeight = parseInt(this.attributes.height);
/*
       setInterval(function(){
           this.draw();
       }.bind(this),10);
       */
        this.draw();
    },
    draw: function() {
        console.log(this.contextWidth, ' x ', this.contextHeight);
        this.context.strokeStyle = 'black';
        this.context.fillStyle = this.borderColor;
        this.context.fillRect(0, 0, this.contextWidth, this.contextHeight)
        var borderWidth = 10;
        var cornerRadius = 20;
        var pulloutHeight = 100;


        this.context.beginPath();
        this.context.moveTo(borderWidth*2, borderWidth + cornerRadius );
       ...