The button 'b' function returns 0 even tho console log from for-loop prints out all points correctly while during mouse move.
My wild guess is that it's because b.onclick is calling data from within the on('mouse:move) function but how would I get it otherwise?
https://jsfiddle.net/ehumkkpp/
<canvas id="myCanvas" style="width: 500; height: 500"></canvas>
<button id="button" class="btn btn-info"># 1</button>
var $ = function(id){return document.getElementById(id)};
var canvas = new fabric.Canvas('myCanvas');
var b = $('button');
var isDown = false, pointerPoints;
canvas.on('mouse:over', function(e){
canvas.isDrawingMode = true;
});
canvas.on('mouse:down', function(o){
isDown = true;
});
canvas.on('mouse:move', function(o){
var pointsPointer = [];
if (isDown == true){
var pointer = canvas.getPointer(o.e);
var px = pointer.x; //o.e.layerX
var py = pointer.y; //o.e.layerY
pointsPointer.push({x:px, y:py});
};
pointerPoints = pointsPointer;
for(let i = 0; i < pointerPoints.length; i++){
console.log('Pointer ', pointerPoints[i]);
};
});
b.onclick = function(){
console.log('Pointer ', pointerPoints.length);
}
var getEl = function(id) {
return document.getElementById(id)
};
var canvas = new fabric.Canvas('myCanvas');
canvas.isDrawingMode = true;
var b = getEl('button');
var isDown = false,
pointerPoints = [];
//canvas.on('mouse:over', function(e){
//});
canvas.on('mouse:down', function(o) {
isDown = true;
});
canvas.on('mouse:move', function(o) {
if (isDown == true) {
var pointer = canvas.getPointer(o.e);
var px = pointer.x; //o.e.layerX
var py = pointer.y; //o.e.layerY
pointerPoints.push({
x: px,
y: py
});
};
//for(let i = 0; i < pointerPoints.length; i++){
//console.log('Pointer ', pointerPoints[i]);
//};
});
canvas.on('mouse:up', function(o) {
isDown = false;
})
b.onclick = function() {
console.log('Pointer ', pointerPoints.length);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<canvas id="myCanvas" style="width: 500; height: 500"></canvas>
<button id="button" class="btn btn-info"># 1</button>