I have created a basic component using a canvas element, and I am currently resizing it with an Input property within the corresponding TypeScript class. My goal is to draw the canvas element directly inside the class. The following code snippet shows my attempt: How can I achieve this in the simplest way possible? (Note the comment in the code - I aim to draw a blue rectangle inside the canvas from the constructor).
import {Component, View, Input} from 'angular2/core';
@Component({
selector: 'chess-diagram',
})
@View({
template: `<canvas class='chess-diag'
[attr.width]='_size'
[attr.height]='_size'></canvas>`,
})
export class ChessDiagram {
private _size: number;
constructor(){
this._size = 150;
// Here I would like to draw a blue rectangle inside the canvas.
}
get size(){
return this._size;
}
@Input () set size(newValue: number){
this._size = Math.floor(newValue);
}
}