Bigger clickable area for raphaeljs objects

Question

I've made a drawing tool using emberjs and raphaeljs and recently started supporting touchscreens. The application allows users to connect dots with lines.

My problem:

my dots are too small for touchscreens and I don't want to resize them because I like the aesthetic... I've also disabled user scaling so the users can't pinch to make the dots bigger so the web application feels more like a native application...

Here's my code for the eventhandlers:

startpoints.mousedown(this.startCurve);

this is my startCurve function:

startCurve: function (evt, x, y){

    var me = this.data('view');
    me.set('dragStartedPoint', this);

    if(evt.target === undefined) {
        //IE
        x = evt.srcElement.offsetLeft + 10;
        y = evt.srcElement.offsetTop + 10;
    } else {
        x = evt.target.cx.baseVal.value;
        y = evt.target.cy.baseVal.value;
    }

    me.set('mouseStartX', x);
    me.set('mouseStartY', y);
    me.set('mouseStopX', x);
    me.set('mouseStopY', y);

    currentCurve = me.curve(me.makePath(x,y,x,y));
    if(this.data('type') == 'answer'){
        currentCurve.data('answer', this.data('answer'));
    } else {
        currentCurve.data('subQuestion', this.data('subQuestion'));
    }
    me.set('isDragging', true);
    me.set('currentCurve', currentCurve);

    evt.preventDefault();
    return false;
}

after this I go on to drawing a line as long as the mousebutton is held down

when the mouse button is released on a point in my set of endpoints the line stays in place

when the mouse button is released on anything else I remove the line

My question:

Is there a way for me to make the clickable area around my dots bigger, in an invisible way for the users, without resizing the dots?

Thanks

Answer 1

Draw a second transparent dot on top of each real dot and attach the mousedown event handler ot the transparent dot. You may need to adjust the pointer-events property to ensure that the transparent dot gets mouse events.

There are various ways to draw a transparent dot e.g. fill="none" or fill-opacity="0".