How to use the pts.CanvasSpace function in pts

createChart() {
    
    // Create Space and Form
    // pass the ref canvas element directly into CanvasSpace
    this.space = new CanvasSpace( this.ptsCanvas ).setup({bgcolor: this.props.bgcolor || "#6cf", resize: true, retina: true});
    this.form = this.space.getForm();

    
    this.renderChart = () => {

      // Given the data, distribute bars across the space's size
      let w = (this.space.size.x) / this.props.data.length;
      let bars = this.props.data.map( (d,i) => {
        return new Group( new Pt(i*w, this.space.size.y), new Pt( i*w, this.space.size.y-d*this.space.size.y-1) );
      });
      
      // Draw a line controlled by mouse pointer
      let line = new Group(new Pt(0, this.space.size.y/2), new Pt( this.space.size.x, this.space.pointer.y ) );
      this.form.stroke("#fff", 3).line( line, 10, "circle" );

      // Draw the bars and also check intersection with the pointer's line

// A demo of convex hull using pts.js. We are using webpack to bundle this demo into "dist/bundle.js".
// Source code licensed under Apache License 2.0.
// Copyright © 2017 William Ngan. (https://github.com/williamngan/pts)

import {CanvasSpace, Create, Polygon} from "pts";


// Initiate Space and Form
var space = new CanvasSpace("#pts").setup({bgcolor: "#09F", resize: true, retina: true});
var form = space.getForm();

let landmarks;

space.add({

  start: (bound) => {
    // Make a face with 30 radial points with slight randomness
    let radius = space.size.minValue().value/3;
    landmarks = Create.radialPts( space.center, radius, 30  );
    landmarks.map( p => p.add( 50*(Math.random() - Math.random()) ) )

  },

  animate: (time, ftime) => {

init() {
    this.space = new CanvasSpace( this.canvRef ).setup({bgcolor: this.props.background, resize: true, retina: true});
    this.form = this.space.getForm();

    this.space.add( this );
    this.space.bindMouse().bindTouch();
  }

constructor(
    private readonly elRef: ElementRef,
    private readonly renderer2: Renderer2,
    private readonly canvas: HTMLCanvasElement,
    readonly bufferService: BufferService,
    readonly socketService: SocketService
  ) {
    (window as any).canvasComponent = this;
    this.renderer2.appendChild(this.elRef.nativeElement, this.canvas);
    this.ctx = this. canvas.getContext('2d')!;

    this.space = new CanvasSpace(this.canvas, () => this.ready$.next(true)).setup({
      bgcolor: '0xFF0000',
      resize: false,
      retina: false,
    });

    this.form = new CanvasForm(this.space);

    this.animate = new Observable(subscriber => {
      this.space.add((t, dt) => subscriber.next({ t: t!, dt: dt! }));
    });

    this.pointer = new Observable(subscriber => {
      let { left, top } = this.canvas.getBoundingClientRect();
      this.space.add({
        resize: () => {
          const rect = this.canvas.getBoundingClientRect();