I'm currently working on an iOS app which uses `HTML 5` and `JavaScript` for drawing Graphs.

I just did a sample App.

### My Code:

```
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var a = 0;
            var b = 0;
            function init()
            {
                var can = document.getElementById('can');
                can.addEventListener("click",click, false);
            }

            function click(event)
            {
                var can = document.getElementById('can');
                var c = can.getContext('2d');
                var parentPosition = getPosition(event.currentTarget);
                c.lineWidth = 1;
                c.strokeStyle = '#FFFFFF';
                c.beginPath();
                c.moveTo(a, b);
                a = event.clientX - parentPosition.x;
                b = event.clientY - parentPosition.y;
                c.lineTo(a, b);
                c.stroke();
            }
            function getPosition(element)
            {
                var xPosition = 0;
                var yPosition = 0;

                while (element)
                {
                    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
                    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
                    element = element.offsetParent;
                }
                return { x: xPosition, y: yPosition };
            }
        </script>
    </head>
    <body oncopy='copy();' onpaste='paste();'onload ='init();'>
            <canvas id="can" style="height:300px;width:300px;background-color:black;">Oops!</canvas>
    </body>
</html>

```

### My Issue:

When a user Taps on the screen, I'm drawing a line to that particular point from previous point.

But in my case when I tap on the screen the line is drawn to some other point. Say if I tapped on point (100,100) the line will be drawn to (100, some arbitrary value). Always the Y position is wrong.

What I did:

* Tested it on simulator
* Tested it on device
* Tested it on Firefox
* Tested it on Chrome

All results are same. I couldn't find the issue. I alerted the clicked `x` and `y` co-ordinate. It's coming correctly. Only problem is with the draw functionality.

### Screenshots:

![Clicked point](https://i.stack.imgur.com/nYnmY.png)

![Drawn Line](https://i.stack.imgur.com/zwCoR.png)

As you can see the X-coordinate is correct. But Y-coordinate is always coming wrong.

Please help me, Thanks in advance.