Typescript Canvas

Question

I am learning typescript and I have a problem with this class, my code now is that

export class Window {

    public title: string;
    public width: number;
    public height: number;
    public canvas;
    public ctx;

    public constructor(title: string, width: number, height: number) {
        this.title = title;
        this.width = width;
        this.height = height;
        this.createCanvas();
    }

    public createCanvas(): void {
        this.canvas = <HTMLCanvasElement>document.createElement('canvas');
        this.ctx = this.canvas.getContext("2d");
        this.canvas.width = 500;
        this.canvas.height = 500;
        
        document.body.appendChild(this.canvas);
}


export class Game {

    private title: string;
    private width: number;
    private height: number;

    public constructor() {
        
    }

    window: Window = new Window("titi", 100, 100);
    
}

The canvas is not being created that way, nothing appears on the screen, can anyone help?

Answer 1

You are initializing the canvas but you are not drawing it. First I added types for canvas and ctx also I added new property for cell size

  public canvas: HTMLCanvasElement;
  public ctx: CanvasRenderingContext2D;
  // 20px for the size of each cell
  CELL_SIZE = 20;

then create a function to draw:

public drawWorld() {
    this.ctx.beginPath();
    // first draw rows
    for (let x = 0; x < this.width + 1; x++) {
      this.ctx.moveTo(this.CELL_SIZE * x, 0);
      // this will draw the line
      this.ctx.lineTo(this.CELL_SIZE * x, this.width * this.CELL_SIZE);
    }
    for (let y = 0; y < this.width + 1; y++) {
      this.ctx.moveTo(0, this.CELL_SIZE * y);
      this.ctx.lineTo(this.width * this.CELL_SIZE, this.CELL_SIZE * y);
    }

    this.ctx.stroke();
  }

Then create an instance and call the methods:

const w = new Window("canvas", 12, 12);
w.drawWorld();

Here is the full code:

export class Window {
  public title: string;
  public width: number;
  public height: number;
  public canvas: HTMLCanvasElement;
  public ctx: CanvasRenderingContext2D;
  // 20px for the size of each cell
  CELL_SIZE = 20;

  public constructor(title: string, width: number, height: number) {
    this.title = title;
    this.width = width;
    this.height = height;
    this.createCanvas();
  }

  public createCanvas(): void {
    this.canvas = <HTMLCanvasElement>document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.canvas.width = 500;
    this.canvas.height = 500;
    document.body.appendChild(this.canvas);
  }

  public drawWorld() {
    this.ctx.beginPath();
    // first draw rows
    for (let x = 0; x < this.width + 1; x++) {
      this.ctx.moveTo(this.CELL_SIZE * x, 0);
      // this will draw the line
      this.ctx.lineTo(this.CELL_SIZE * x, this.width * this.CELL_SIZE);
    }
    for (let y = 0; y < this.width + 1; y++) {
      this.ctx.moveTo(0, this.CELL_SIZE * y);
      this.ctx.lineTo(this.width * this.CELL_SIZE, this.CELL_SIZE * y);
    }

    this.ctx.stroke();
  }
}

const w = new Window("canvas", 12, 12);
w.drawWorld();

Here is the proof of work: