Html5画布翻译和缩放

Question

这里我有坐标lat和lng，这个坐标是十进制数，我想从点显示路径：

var pts = [{"X":52.67528921580262,"Y":8.373513221740723},{"X":52.6759657545252,"Y":8.374114036560059},{"X":52.682574466310314,"Y":8.37256908416748}, {"X":52.68356308524067,"Y":8.373942375183105},{"X":52.68293869694087,"Y":8.375487327575684},{"X":52.67685044320001, "Y":8.376259803771973},{"X":52.6756535071859,"Y":8.379607200622559},{"X":52.676017795531436,"Y":8.382096290588379},{"X":52.68101344348877, "Y":8.380722999572754},{"X":52.68351105322329, "Y":8.383641242980957}]; 

谷歌地图上的

看起来像这样：

现在我想缩放我的html5画布以显示此坐标和线条，如上图所示......所以比例相同（比例）。

我尝试使用翻译和缩放功能，我写道：

ctx.scale(100,100);
ctx.translate(52.67528921580262,8.373513221740723);

但我在画布上看不到任何东西......

完整的代码和演示在这里：http://jsbin.com/qaledu/2/edit?js,output

那我怎么能在画布上显示坐标-PINTS如图像（googlemap）？ 是否可以使用翻译和缩放html5函数？