How do I do this in a template instead of in code?

See more:

templates

This example works, but this is not the type of solution as intended.
How do I use the template line to do this?

What I have tried:

// WERKEND 160607 22:30

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: ''
})
export class AppComponent {

    canvas: HTMLCanvasElement;
    ctx: any;
  
  constructor () {
    
    this.canvas =  <HTMLCanvasElement>document.createElement("canvas");
    this.canvas.width = 400;
    this.canvas.height = 400;
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");

    this.canvas.style.setProperty("background", "red", null);
    this.canvas.style.setProperty("border-width", "thick", null);
    this.canvas.style.setProperty("border-color", "blue", null);
    this.canvas.style.setProperty("border-style", "dotted", null);

    this.ctx.beginPath();
    this.ctx.moveTo(25, 25);
    this.ctx.lineTo(375, 375);
    this.ctx.stroke();
  }
}