draw an A line By hand

[CodeDeveloperOM]

I have
3 pens
I want to draw an A line and a diagram in the scene
I got a bunch of codes, but they don't work
I want one that is easy and simple to draw lines by hand
In a scheme without what goes out of the frame
Does anyone have something like you?
many thanks

[kglad]

use the drawing api (as3 or createjs) lineto (in a loop) and moveto methods with mouse down and stage mouse up listeners.

eg with createjs, EaselJS v1.0.0 API Documentation : Graphics (createjs.com)

[CodeDeveloperOM]

Why not work?

https://drive.google.com/file/d/1jVCAs35ScEBB6mngqy7XfxI0jmHPukHJ/view?usp=sharing

var clearButton = document.querySelector("clear");
var stroke_weight = document.querySelector("stroke-weight");
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var isDrawing = false;

canvas.addEventListener("mousedown", start);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stop);

this.clearButton.addEventListener("click", clearCanvas.bind(this));

function start(e) {
	isDrawing = true;
	draw(e);
}

function draw(x,y) {
	if (!isDrawing) return;
	ctx.lineWidth = 3;
	ctx.lineCap = "round";
	ctx.strokeStyle = "#FFFFFF";

	ctx.lineTo(x, y);
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(x, y);
}

function stop() {
	isDrawing = false;
	ctx.beginPath();
}

function clearCanvas() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}

@kglad @JoãoCésar 

[Colin Holgate]

There are various things wrong, but the first one is that you are taking a mouse event and putting it into the x variable. Try this instead:

function draw(e) {
	var x = e.x;
	var y = e.y;

After that you should start to see why it only draws a line from the corner, then fix those issues. 

[CodeDeveloperOM]

@Colin Holgate 

thank you for your reply
But I try to draw the line with the movement of the hand, it is like drawing 

[kglad · Accepted solution]

var s = new createjs.Shape();
this.addChild(s);
var g = s.graphics;
styleF();

var startF = start.bind(this);
var drawF = draw.bind(this);
var stopF= stop.bind(this);
var initDrawF = initDraw.bind(this);

// b is the instance name of the white drawing utensil

this.b.addEventListener("click", initWhiteDrawF);

// c is the instance name of the clear button.
this.c.addEventListener("click", clear.bind(this));

function initWhiteDraw() {
whiteStyleF();
this.b.removeEventListener("click", initDrawF);
stage.addEventListener("stagemousedown",startF);
}

function start() {
stage.removeEventListener("stagemousedown",startF);
stage.addEventListener("stagemousemove",drawF);
stage.addEventListener("stagemouseup",stopF);
g.moveTo(stage.mouseX,stage.mouseY);
}
function draw(){
g.lineTo(stage.mouseX,stage.mouseY)
}

function stop() {
stage.removeEventListener("stagemousemove",drawF);
stage.removeEventListener("stagemouseup",stopF);
this.b.addEventListener("click", initDrawF);
}

function clear() {
g.clear();
}
function whiteStyleF(){
g.setStrokeStyle(1);
g.beginStroke("#ffffff");
}

[CodeDeveloperOM]

Many thanks, creative
I wish you a good and happy life (^_^)

[kglad]

you're welcome.

[Colin Holgate]

Right, I was only telling you the main problem. kglad went over everything else. Note how he used stage.mouseX, stage.mouseY, that's similar to the e.x and e.y I was showing.

[CodeDeveloperOM]

Many thanks for your kind response and knowledge.

[CodeDeveloperOM]

@Colin Holgate  @kglad 

Sorry again
But I tried
For the drawing to be in the blue area only and not in the whole stage?

function draw() {
g.lineTo(ctx.mouseX, ctx.mouseY);

if (((g.lineTo(ctx.mouseX)) <= -9.35) || ((g.lineTo(ctx.mouseY)) >= 427)) {
g.clear();
} else {}
}

[Colin Holgate]

Can you show your current script? It would be easier to suggest what to change in your script, because you will have modified kglad's script to work for your instances.

[CodeDeveloperOM]

@Colin Holgate 

I am trying the same as kglad code

https://drive.google.com/file/d/14oQb6D6tbnquBHTAZpn5-E3cquA7oMwu/view?usp=sharing

[kglad]

i don't know what is the blue area but if it's a rectangle, you can check stage.mouseX  and stage.mouseY thsee if they're inyour blue rectangle before executing lineTo

[CodeDeveloperOM]

Ok i will try it