Question

I’m fairly new to JavaScript and been fiddling around with HTML5 element.

The thing is that I’m now using a library to help simplify the use of the canvas on a multitude of devices, including mobile, but I have now a question that is bugging me since it appears so simple yet I’m unable to find a solution. I do believe this might be a newbie mistake but here is the deal:

I have these 2 functions:

function drawLine(sX, sY, eX, eY) {
    ctx.beginPath()
    ctx.moveTo(sX, sY);
    ctx.lineTo(eX, eY);
    ctx.stroke();
    ctx.closePath();
    return { x: eX, y: eY };
}

function canvas() {
    var canvas = new Canvas ('canvas', 0, function () {
        this.clear();
        this.setAutoResize(true);
    });

    canvas.canvasElement.width = window.innerWidth;
    canvas.canvasElement.height = window.innerHeight;

    canvas.onTouchStart = function(start) {
        var sX; var sY;
        return {sX: start.clientX, sY: start.clientY};
    }

    canvas.onTouchEnd = function (end) {
        var eX; var eY;
        return {eX: end.clientX, eY: end.clientY};
    }

    // canvas.onTouchMove = drawLine(sX, sY, eX, eY);
}

Not getting into too much detail, how will I be able to use the values returned by onTouchStart() and onTouchEnd() to pass the x,y positions into the drawLine function?

All I’m getting is values that are not defined and I’m really lost here..

UPDATE:

@Juan Mendes,

Thanks for your help, but that didn’t seem to work either.

For a better understanding of the “backside” code, here is an example of the touchstart thing:

this.canvasElement.addEventListener('touchstart', function(event) {
    var touchCount = event.changedTouches.length;
    var touches = [];
    var touch = null;

    for (var i = 0; i < touchCount; i++) {
        touch = event.changedTouches[i];

        var touchInfo = {
            pageX : touch.pageX,
            pageY : touch.pageY,
            clientX : touch.clientX,
            clientY : touch.clientY,
            screenX : touch.screenX,
            screenY : touch.screenY,
            target : touch.target,
            identifier : touch.identifier
        };

    self.onTouchStart(touchInfo, i, touchCount, event);

    touches.push(touchInfo);

    self.previousTouchInfo[touch.identifier] = touchInfo;
    }

    if (touchCount == 1) {
        touch = event.changedTouches[0];

        var x = touch.clientX;
        var y = touch.clientY;

        if (self.touchEmulatesMouse) {
            self.mouse.x = x;
            self.mouse.y = y;
            self.mouse.left = true;

            if (self.layerParent != null) {
                self.layerParent.onMouseDown(x, y, 0);
            }

        self.onMouseDown(x, y, 0);
        }
        } else {
            self.onMultiTouchStart(touches, event);
        }
    }, false);

/* A bit more down the library code */
/**
* Called at the start of every touch start (including when multiple touches occured)
*
* The info object contains the folloring info:
* - pageX - X coordinate relative to the full page (includes scrolling)
* - pageY - Y coordinate relative to the full page (includes scrolling)
* - clientX - X coordinate of touch relative to the viewport (excludes scroll offset)
* - clientY - Y coordinate of touch relative to the viewport (excludes scroll offset)
* - screenX - X coordinate relative to the screen
* - screenY - Y coordinate relative to the screen
*
* @param {object} info Touch info
* @param {integer} index Touch index
* @param {integer} count The total number of active touches
* @param {object} event The actual touch event
*/
onTouchStart: function(info, index, count, event) {},

And I also changed my code to reflect your help, a few changes and also tried using the touchInfo param like this:

function createCanvas() {
var canvas = new Canvas ('canvas', 0, function () {
    this.clear();
    this.setAutoResize(true);
});

var cWidth = canvas.canvasElement.width = window.innerWidth;
var cHeight = canvas.canvasElement.height = window.innerHeight;

var startPoint = null;

function fill() {
    canvas.fillStyle = "black";
    canvas.fillRect(0, 0, cWidth, cHeight);
    canvas.beginPath();
}

// Draw a line on the canvas from (s)tart to (e)nd
function drawLine(sX, sY, eX, eY) {
    canvas.beginPath()
    canvas.moveTo(sX, sY);
    canvas.lineTo(eX, eY);
    canvas.stroke();
    canvas.closePath();
    //return { x: eX, y: eY };
}

fill();

canvas.onTouchStart = function(start) {
    startPoint = {sX: this.clientX, sY: this.clientY};
}

canvas.onTouchEnd = function (end) {
    drawLine(startPoint.sX, startPoint.sY, this.clientX, this.clientY);
    // return {eX: end.clientX, eY: end.clientY};
}
}

Any help would be very appreciated. Thanks in advance

Answer 1

I finally managed to get around the problem. Turns out the library wasn’t properly ended (yet) and I was also misusing the functions without getting any arguments.