Angular2 + canvas object array - ngFor only stringifies object - doesnt append. Only append node or append child works..

<!DOCTYPE html>
<html>

  <head>
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://npmcdn.com/zone.js@0.6.12/dist/zone.js"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular2 Starter Plunker - Typescript - RC.0

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    '@angular': 'https://npmcdn.com/@angular',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    '@angular/core': {
      main: 'bundles/core.umd.js',
      defaultExtension: 'js'
    },
    '@angular/compiler': {
      main: 'bundles/compiler.umd.js',
      defaultExtension: 'js'
    },
    '@angular/common': {
      main: 'bundles/common.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser-dynamic': {
      main: 'bundles/platform-browser-dynamic.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser': {
      main: 'bundles/platform-browser.umd.js',
      defaultExtension: 'js'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app';

bootstrap(AppComponent, [])
  .catch(err => console.error(err));


// import  {bootstrap} from '@angular2/platform-browser-dynamic';
//<img src="{{cvs.toDataURL()}}" style="position:absolute;top:30px;left:30px;-moz-border-radius:100px;border:1px  solid #ddd;-moz-box-shadow: 0px 0px 8px  #fff;opacity: 0.5;">
import {Component} from '@angular/core';
 import {singleCanvas} from './singleCanvas.components'
 
@Component({
    selector:'my-app',
    directives: [singleCanvas],
    template: 
    `
<div>  
    <input class="btn btn-primary" type="file" multiple (change)="fileChange(input)" #input />
</div>  

 
    <div  style="position:relative;" id="cavasesDiv">
 <single-canvas *ngFor="let canvas of canvases" [canvas] = "canvas"></single-canvas>
    </div>
 
  ` 
   
 
})
 //THIS MAY TOUCH ON THE ISSUE? - https://github.com/angular/angular/issues/4843
export class AppComponent { 
 
canvases:HTMLCanvasElement[]=[];
 file_srcs: string[] = [];
files:File[]=[];
    // This is called when the user selects new files from the upload button
    
    fileChange(input){

        // Loop through each picture file
        for (var i = 0; i < input.files.length; i++) {

            this.files.push(input.files[i]);

            // Create an img element and add the image file data to it
            var img = document.createElement("img");
            img.src = window.URL.createObjectURL(input.files[i]);

            // Create a FileReader
            var reader = new FileReader();

            // Add an event listener to deal with the file when the reader is complete
            reader.addEventListener("load", (event) => {
                // Get the event.target.result from the reader (base64 of the image)
                img.src = event.target.result;

                // Resize the image
                var resized_img = this.resize(img, i);

                // Push the img src (base64 string) into our array that we display in our html template
                this.file_srcs.push(resized_img);
            }, false);

            reader.readAsDataURL(input.files[i]);
        }
    }


    resize (img, indx, MAX_WIDTH:number = 900, MAX_HEIGHT:number = 900){
        var canvas = document.createElement("canvas");
 
        var width = img.width;
        var height = img.height;

        if (width > height) {
            if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
            }
        } else {
            if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
            }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");

        ctx.drawImage(img, 0, 0, width, height);

        var dataUrl = canvas.toDataURL('image/jpeg');  
        // IMPORTANT: 'jpeg' NOT 'jpg'
 canvas.id= "cvs" + indx;
this.canvases.push(canvas);
//document.body.appendChild(canvas);
 
        return dataUrl
    }

}

//our root app component
import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'single-canvas',
  template: `
    <div>
      {{canvas}}
    </div>
  `
})
export class singleCanvas {
  
  @Input() canvas;
 //cvs:HTMLCanvasElement;
 
        ngOnInit(){
         this.canvas.setAttribute("style", "position:absolute;top:30px;left:30px;-moz-border-radius:100px;border:1px  solid #ddd;-moz-box-shadow: 0px 0px 8px  #fff;opacity: 0.5;");
        document.getElementById("cavasesDiv").appendChild(this.canvas);
        
        }
        

}