Draw lines in specific area on stage

[Marampazú]

I found this answer in the forum, I am looking for the way to draw lines to mark on a specific item. I'm doing a letter-type activity.

var miLinea, origenX, origenY, grosor, color;

miLinea = new createjs.Shape();

stage.on("stagemousemove", function (evt) {

  if (origenX) {

  miLinea.graphics.beginStroke(color)

  .setStrokeStyle(grosor, "round")

  .moveTo(origenX, origenY)

  .lineTo(evt.stageX, evt.stageY);

  stage.update();

  }

  origenX = evt.stageX;

  origenY = evt.stageY;

  stage.update();

})

stage.on("stagemousedown", function (event) {

  color = createjs.Graphics.getRGB(150, 100, 150, 1);

  grosor = 4;

});

stage.on("stagemouseup", function (event) {

  color = "";

});

This code works, but usually traces on the stage. I also tried to add buttons and objects by drawing them directly on the stage but these are not shown on the screen.

Is there any way that the code above written allows you to draw lines only in a certain area and not at all the stage?

I continue to learn in a self-taught way, really the help they provide here is very useful.

Greetings.

[Marampazú]

I've been doing tests, I've managed to draw a line, the problem is that you paint multiple lines on the screen.

var miLinea, color, vaX, vaY;

var empezoX = 0;

var empezoY = 0;

color = createjs.Graphics.getRGB(255, 0, 0, 1);

this.circle.on("pressmove", function (evt) {

     vaX = evt.stageX;

     vaY = evt.stageY;

     evt.target.x = evt.stageX;

     evt.target.y = evt.stageY;

     pinta();

});

this.circle.on("pressup", function (evt) {

     console.log("up");

})

function pinta() {

     miLinea = stage.addChild(new createjs.Shape());

     miLinea.graphics.beginStroke(color)

               .setStrokeStyle(4, "round")

               .moveTo(empezoX, empezoY)

               .lineTo(vaX, vaY);

}

Any idea how to make it just paint a straight line at a time, that is to say that the drag that does currently paint only one line at a time?

Thank you very much (I have not advanced much, to be honest).

Greetings.

[Marampazú]

Easy:

var miLinea, color, vaX, vaY;

var empezoX = 0;

var empezoY = 0;

color = createjs.Graphics.getRGB(255, 0, 0, 1);

this.circle.on("pressmove", function (evt) {

     vaX = evt.stageX;

     vaY = evt.stageY;

     evt.target.x = evt.stageX;

     evt.target.y = evt.stageY;

     pinta();

});

this.circle.on("pressup", function (evt) {

     console.log("up");

})

function pinta() {

     miLinea = stage.removeChild(miLinea);

     miLinea = stage.addChild(new createjs.Shape());

     miLinea.graphics.beginStroke(color)

               .setStrokeStyle(4, "round")

               .moveTo(empezoX, empezoY)

               .lineTo(vaX, vaY);

}

Now what I have to do is to delete / write multiple lines.
As soon as I have some extra breakthrough, I'll share it here.

Greetings.