html5 - canvas中画笔坐标转换问题

Question

在画布中画画的时候，画笔不能与鼠标的X,Y坐标相同
js代码

window.onload=function(){
    var ocanvas=document.getElementById('canvas');
    var ocolor=document.getElementById('color');
    var obrushSize=document.getElementById('brushSize');
    var ocontrol=document.getElementById('control');
    var omakeImage=document.getElementById('makeImage');
    new Canvas(ocanvas,ocolor,obrushSize,ocontrol,omakeImage);
}
function Canvas(){
    //把new canvas中的参数传递到init这个父类中的方法上去
    this.init.apply(this,arguments);
}
Canvas.prototype={
    preArray:[],//用于上一步所用
    midArray:[],//用户存放当前的图像
    nextArray:[],//用于下一步所用
    array_paint:[],
    config:{
        lineWidth:1,
        lineColor:"red",
        shadowBlur:2

    },
    init:function(oCanvas,oColor,oBrushSize,oControl,oMakeImage){
        //alert(1);
        this.canvas=oCanvas;
        this.context=oCanvas.getContext('2d');
        this.color=oColor;
        this.brushSize=oBrushSize;
        this.control=oControl;
        this.makeImage=oMakeImage;
        this.initDraw();
        this.Draw(oCanvas);
        //this.setDrawStyle();
    },
    initDraw:function(){
        var data=this.context.getImageData(0,0,600,500);
        this.midArray.push(data);
    },
    Draw:function(canvas){
        var _this=this;
        //e当前事件的句柄
        canvas.onmousedown=function(e){
             var x=e.offsetX;
             var   y=e.offsetY;
                //left=this.parentNode.offsetLeft,
                //top=this.parentNode.offsetTop,
                canvasX=x,
                canvasY=y;
                //_this.setDrawStyle();
                _this.context.beginPath();
                _this.context.moveTo(canvasX, canvasY);
                var preData=_this.context.getImageData(0,0,600,500);
                _this.preArray.push(preData);
                canvas.onmousemove=function(e){
                    var x1=e.offsetX,
                        y1=e.offsetY,
                        canvasX1=x1;
                        canvasY1=y1;
                        if(e.target==_this.canvas){
                            _this.context.lineTo(canvasX1,canvasY1);
                            _this.context.stroke();
                        }else{
                            //_this.context.beginPath();
                        }
                    }
        };

    },
    setDrawStyle:function(){
        this.context.lineWidth=this.config.lineWidth;
        this.context.strokeStyle=this.config.lineColor;
        this.context.shadowColor=this.config.lineColor;
        this.context.shadowBlur=this.config.shadowBlur;
    }
    
};

css代码：

*{
    margin:0px;
    padding:0px;
    font-size:16px;
    font-weight:bold;
}
.wrap{
    width:804px;
    height:500px;
    border:1px solid black;
    margin:20px auto;
}
#canvas{
    float:left;
    width:600px;
    height:500px;
    border:1px solid black;
}
#canvas:hover{
    cursor:crosshair;
}
.imagep{
    float:right;
    width:200px;
    height:500px;
    border:1px solid black;
}
#color h5{
    margin-left:20px;
    margin-top: 10px;
}
#color ul li{
    list-style:none;
    width:35px;
    height:35px;
    margin:10px;
    float:left;
    cursor:pointer;
    border:3px solid black;
}
#brushSize{
    display:block;
    margin:10px;
    cursor:pointer;
    
}
#brushSize p{
    width:10px;
    height:10px;
    margin-left:20px;
    margin-top: 15px;
    cursor:pointer;
    background:url(image/brush.png);
    float:left;
}
#brushSize h5{
    margin-left:10px;
    margin-top: 30px;
    display:block;
}

#brushSize .smallBrush{
    background-position:-6px -6px;
}
#brushSize .middleBrush{
    background-position:-31px -6px;
}
#brushSize .largeBrush{
    background-position:-54px -6px;
}
#control h5{
    margin-top:30px;
    margin-left:20px;
}
#control p{
    margin-top:20px;
    margin-left:30px;
    width:20px;
    height:15px;
    float:left;
    background:url(image/icon.png);
    cursor:pointer;
}
#control .return-control{
    background-position:-2px -148px;
}
#control .next-control{
    background-position:-2px -168px;
}
#control .clearBoth{
    background-position:-2px -188px;
}
#makeImage{
    margin-top:20px;
    margin-left:10px;
}
#control .return-control:hover{
    /*background-position:-2px -168px;*/
    background-position:-2px -208px;    
}
#control .next-control:hover{
    background-position:-2px -228px;
}
#control .clearBoth:hover{
    background-position:-2px -251px;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas实现涂鸦效果</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
<p class="wrap">
    <canvas id="canvas">
        浏览器不支持canvas，请跟换浏览器
    </canvas>
    <p class="imagep">
    <p id="color">
            <h5>画笔颜色</h5>
            <ul>
                <li style="background:#fef4ac"></li>
                <li style="background:#0018ba"></li>
                <li style="background:#ffc200"></li>
                <li style="background:#f32f15"></li>
                <li style="background:#cccccc"></li>
                <li style="background:#5ab639"></li>
            </ul>
        </p>
        <p id="brushSize">
            <h5>画笔大小</h5>
            <p class="smallBrush"></p>
            <p class="middleBrush"></p>
            <p class="largeBrush"></p>
        </p>
        <p id="control">
            <h5>相关操作</h5>
            <p class="return-control"></p>
            <p class="next-control"></p>
            <p class="clearBoth"></p>
        </p>
        <input id="makeImage" type="button" value="生成图像"></input>
        
    </p>
</p>
</body>
</html>

各位大神知道的请告诉一下，不胜感激