How to specify the position on the stage for canvas objects?

Question

JavaScript

var setting={
        maxCount:40
    };
       
    function createPAtch(max){
        for(var i=0; i<max; i++){
//            var patchObj= new Patch;
//            patchObj.id=i;
//            patchArray.push(patchObj);
        var randColorCount=Math.floor(Math.random()*12);
            console.log(Math.floor(Math.random()*window.innerWidth));

      var randPosX=Math.floor(Math.random()*window.innerWidth);
      var randPosY=Math.floor(Math.random()*window.innerHeight);
      
      context.beginPath();
      context.moveTo(randPosX, randPosY);
            

      // line 1
      context.lineTo(randPosX, randPosY);

      // quadratic curve
      context.quadraticCurveTo(230, 200, 250, 120);

      // bezier curve
      context.bezierCurveTo(290, -40, 300, 200, 400, 150);

      // line 2
      context.lineTo(500, 90);

      context.lineWidth = 5;
      context.strokeStyle = ballColors[randColorCount];
      context.stroke();
      context.positionX= Math.floor(Math.random()*window.innerWidth);
      context.positionY= Math.floor(Math.random()*window.innerHeight);
            
            
       
       
        };
    };
    
       createPAtch(setting.maxCount);

how to create a separate context.lineTo object so that it contains all the dashes and lines.
so that later it can be accessed and mixed around the scene, etc.
I want this whole object to be separate and not just different lines

Answer 1

Get an array and add all the resulting random coordinates there, then work with these coordinates:

var lineObjects = [];

function createPAtch(max) {
    // ...
    var randPosX=Math.floor(Math.random()*window.innerWidth);
    var randPosY=Math.floor(Math.random()*window.innerHeight);

    lineObjects.push({ x: randPosX, y: randPosY });
    // ...
}