// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
stackx = new Array();
stacky = new Array();
context.lineWidth = 10;
context.beginPath();
tool.started = true;
};
// This function is called every time you move the mouse.
this.mousemove = function (ev) {
if (tool.started) {
stackx.push(ev._x);
stacky.push(ev._y);
context.lineTo(ev._x, ev._y);
context.stroke();
}
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started)
{
for (var i = 0; i < 20; i++)
{
stackx.pop();
stacky.pop();
}
var angle = Math.atan2(ev._y-stacky.pop(),ev._x-stackx.pop());
context.beginPath();
context.moveTo(ev._x, ev._y);
context.lineTo(ev._x-20*Math.cos(angle-Math.PI/6),ev._y-20*Math.sin(angle-Math.PI/6));
context.lineTo(ev._x-20*Math.cos(angle+Math.PI/6),ev._y-20*Math.sin(angle+Math.PI/6));
context.closePath();
context . fillStyle = color_value;
context.fill();
}
tool.started = false;
tool.mousemove(ev);
}
this.mousemove = function (ev) {
if (tool.started) {
stackx.push(ev._x);
stacky.push(ev._y);
if(stackx.length % 20 == 0){ //draw a line every time the array length is divisible by 20
context.lineTo(ev._x, ev._y);
context.stroke();
}
}
};
var lastXseg, lastYseg, prevXseg, prevYseg;
this.mousemove = function (ev) {
if (tool.started) {
stackx.push(ev._x);
stacky.push(ev._y);
if (color_value == "#FF7F50") //referred pain
{
if(stackx.length % 20 == 0){
if(stackx.length == 20){
prevXseg = stackx[0];
prevYseg = stacky[0];
}else{
prevXseg = lastXseg;
prevYseg = lastYseg;
}
lastXseg = ev._x;
lastYseg = ev._y;
context.lineTo(ev._x, ev._y);
context.stroke();
}
}else{
context.lineTo(ev._x, ev._y);
context.stroke();
}
}
};
this.mousedown = function (ev) {
segCount = 0;
if (color_value == "#FF7F50") //referred pain
{
context.lineWidth = 2;
reptSeg = 7;
}
else
{
context.lineWidth = 10;
reptSeg = 1;
}
}:
this.mousemove = function (ev)
{
if (tool.started)
{
if(!segCount)
{
prevX = lastX;
prevY = lastY;
lastX = ev._x;
lastY = ev._y;
segCount = reptSeg;
context.lineTo(ev._x, ev._y);
context.stroke();
}
segCount--;
}
};
this.mouseup = function (ev) {
if (tool.started)
{
if (color_value == "#FF7F50")
{
var angle = Math.atan2(lastY-prevY,lastX-prevX);
context.beginPath();
context.moveTo(lastX+15*Math.cos(angle),lastY+15*Math.sin(angle));
context.lineTo(lastX-7*Math.cos(angle-Math.PI/4),lastY-7*Math.sin(angle-Math.PI/4));
context.lineTo(lastX-7*Math.cos(angle+Math.PI/4),lastY-7*Math.sin(angle+Math.PI/4));
context.closePath();
context . fillStyle = color_value;
context.fill();
}
...
If you are experiencing a similar issue, please ask a related question
Title | # Comments | Views | Activity |
---|---|---|---|
[HTML] Graphic not centered on page | 4 | 45 | |
JavaScript Chosen Plugin Drop Down Appears Too Thin and Unable to Select | 4 | 26 | |
How to change pointer icon to hand icon on mouseover | 2 | 17 | |
what is the difference between a object and a array | 4 | 25 |
Join the community of 500,000 technology professionals and ask your questions.
Connect with top rated Experts
20 Experts available now in Live!