how to set the offset on touch events - html

Question

i am not getting the exact position of x and y co-ordinates in the ipad. Can some explain what am i doing wrong? this s a painting app for children where they can color on an image using canvas. its coloring but error being that its on starting on the point where the user touches the screen, its slightly below the point of contact. you can test this on your mobile or tablet..thie link is http://talentedash.co.uk/color/paint.html . Dont try this on desktop as it wont work
<script type="text/javascript">
var canvas = null; //canvas object
var context = null; //canvas's context object
var clearBtn = null; //clear button object
var defaultColor="#3577BB";
var defaultShape="round";
var defaultWidth=50;
/*boolean var to check if the touchstart event
is caused and then record the initial co-ordinate*/
var buttonDown = false;
//onLoad event register
window.addEventListener('load', initApp, false);
function initApp() {
setTimeout(function() { window.scrollTo(0, 1); }, 10); //hide the address bar of the browser.
canvas = document.getElementById('paintBox');
clearBtn = document.getElementById('clearBtn');
initializeEvents();
context = canvas.getContext('2d'); //get the 2D drawing context of the canvas
context.strokeStyle = defaultColor;
context.lineJoin = defaultShape;
context.lineWidth = defaultWidth;
/*Main image*/
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var sources = {
main: 'transparent-charac1.png',
};
loadImages(sources, function(images) {
context.drawImage(images.main, 0, 0, 400, 800);
context.globalCompositeOperation = "destination-atop";
});
}
function initializeEvents() {
canvas.addEventListener('touchstart', startPaint, false);
canvas.addEventListener('touchmove', continuePaint, false);
canvas.addEventListener('touchend', stopPaint, false);
clearBtn.addEventListener('touchend', clearCanvas,false);
}
function clearCanvas() {
context.clearRect(0,0,canvas.width,canvas.height);
}
function startPaint(evt) {
if(!buttonDown)
{
context.beginPath();
context.moveTo(evt.touches[0].pageX, evt.touches[0].pageY);
buttonDown = true;
}
evt.preventDefault();
}
function continuePaint(evt) {
if(buttonDown)
{
context.lineTo(evt.touches[0].pageX ,evt.touches[0].pageY);
context.stroke();
}
}
function setColor(col)
{
context.strokeStyle = col;
}
function setSize(px)
{
context.lineWidth=px;
}
function stopPaint() {
buttonDown = false;
}
</script>