What is preventing my function from being invoked?-CodePudding

I'm trying to draw a random set of lines on a Canvas, with positions 0 - 100 corresponding to the X values and randomly assigned sizes the Y values. However, for some reason, my drawLines() function doesn't appear to be being invoked. Nothing appears in the console and nothing is drawn. What did I do wrong?

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// we could accomplish this using Classes instead

// create object that holds all lines position and sizes
class Lines {
    constructor(numLines = 100) {
        this.numLines = numLines;
        this.positions = function () {
        var array = []
        for (let i = 1; i <= this.numLines; i  ) {
            array.push(i)
        }
        return array
        };
         this.sizes = function () {
        var array2 = []
        for (let i = 1; i <= this.numLines; i  ) {
            array2.push(math.random() * numLines)
        }
        return array2
        };
    }

    // create function that draws all lines based on how the object looks 
    drawLines() {
        for (let i = 1; i <= Lines.positions; i  ) {
            ctx.moveTo(this.positions[i], 0);
            ctx.lineTo(this.positions[i], this.sizes[i]*5);
            ctx.stroke();
        }
    }
}



var newLines = new Lines(100);
newLines.drawLines()

function drawLine (position, size) {


    ctx.moveTo(position, 0);
    ctx.lineTo(position, size*5);
    ctx.stroke();
}

CodePudding user response：

The positions and sizes members are functions and they aren't being called. So your drawLines function could be something like this:

drawLines() {
    var positions = this.positions()
    var sizes = this.sizes()
    for (let i = 1; i <= positions.length; i  ) {
        ctx.moveTo(positions[i], 0);
        ctx.lineTo(positions[i], sizes[i]*5);
        ctx.stroke();
    }
}

Also math.random() should be Math.random(),

CodePudding user response：

The main issue in your code is that positions and sizes are functions, yet you're attempting to use them like properties. You need to invoke the functions to generate the arrays. I would also suggest you store the result, not repeatedly call those functions as you will get a different result every time you call sizes().

In addition, math needs to be Math, you can use fill() and map() to generate the content in the arrays, and your for loop should go from 0 to 99, not 1 to 99.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// create object that holds all lines position and sizes
class Lines {
  constructor(numLines = 100) {
    this.numLines = numLines;
    this.positions = () => Array(this.numLines).fill().map((_, i) => i   1),
    this.sizes = () => Array(this.numLines).fill().map(_ => Math.random() * numLines)
  }

  // create function that draws all lines based on how the object looks 
  drawLines() {
    const positions = this.positions();
    const sizes = this.sizes();
    for (let i = 0; i <= positions.length; i  ) { 
      ctx.moveTo(positions[i], 0);
      ctx.lineTo(positions[i], sizes[i] * 5);
      ctx.stroke();
    }
  }
}

var newLines = new Lines(100);
newLines.drawLines();

<canvas id="myCanvas" width="500" height="500"></canvas>