Drawing arrow on canvas after zooming

See more:

Canvas

I am using HTML5 canvas to allow user to draw objects on it.I have newly added zoom in functionality to it,everything works fine except after adding zooming to canvas the line of arrow get drawn properly but arrow head gets misplaced on canvas.
Below are the functions for drawing line and arrow head.

function DrawLine(ctx, mouseDownX, mouseDownY, mouseX, mouseY, color, diffX, diffY, isArrow) {
    writeLog();
    ctx.beginPath();
    ctx.strokeStyle = color;

    //    if (window.isZoomdraw) {
    ctx.save();
    ctx.translate(cw / 2, ch / 2);
    ctx.scale(scale, scale);
    //    }

    ctx.moveTo(mouseDownX + diffX, mouseDownY + diffY);
    ctx.lineTo(mouseX + diffX, mouseY + diffY);
    ctx.stroke();

    //    if (window.isZoomdraw)
    ctx.restore();

    if (isArrow) {

        var radianAngle = Math.atan((mouseY - mouseDownY) / (mouseX - mouseDownX));
        radianAngle += ((mouseX > mouseDownX) ? 90 : -90) * Math.PI / 180;
        drawArrowHead(ctx, mouseX + diffX, mouseY + diffY, radianAngle, strokeColor);
    }

}

function drawArrowHead(ctx, x, y, radians, strokeColor) {

    var arrowWidth = ctx.lineWidth / 3;
    ctx.save();
    ctx.strokeStyle = "white";
    ctx.beginPath();
    ctx.translate(x, y);
    ctx.scale(scale, scale);
    ctx.rotate(radians);
    ctx.moveTo(0, 0);
    ctx.lineTo(16 * arrowWidth, 10 * arrowWidth);
    ctx.lineTo(-16 * arrowWidth, 10 * arrowWidth);
    ctx.closePath();
    ctx.restore();
    ctx.fillStyle = "white";
    ctx.fill();
}