Cross-origin resource sharing

參考網址：
 http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing
 https://developer.mozilla.org/en-    US/docs/Web/HTTP/Access_control_CORS

Cross domain issue

目前遇到無法正常運作的情形

1. Ajax 取回不同domain主機的檔案
2. Canvas.toDataURL()

解決方式

    Server 端增加回傳 Header

1. Access-Control-Allow-Origin "*"
2. Access-Control-Allow-Methods "GET"

    Client 端使用 Image 時

• img.crossOrigin = "anonymous";

HTML5 Canvas Scale Smoothing

Canvas 預設 放大/縮小 會做 Smoothing，但反而造成不必要的模糊

在 Chrome 、 Firefox 提供關閉的方式

ctx.imageSmoothingEnabled = false;

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;

測試網址如下:
http://jsfiddle.net/saviski/pGs4f/12/

http://jsfiddle.net/P36cS/2/

解決canvas在行動裝置上模糊的問題

在高解析度的行動裝置上畫圖，一直會有模糊的問題

可以參考 http://www.html5rocks.com/en/tutorials/canvas/hidpi/

javascript 如下：

var devicePixelRatio = window.devicePixelRatio || 1,
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
                            context.mozBackingStorePixelRatio ||
                            context.msBackingStorePixelRatio ||
                            context.oBackingStorePixelRatio ||
                            context.backingStorePixelRatio || 1,

var ratio = devicePixelRatio / backingStoreRatio;

if (devicePixelRatio !== backingStoreRatio) {

        var oldWidth = canvas.width;
        var oldHeight = canvas.height;

        canvas.width = oldWidth * ratio;
        canvas.height = oldHeight * ratio;

        canvas.style.width = oldWidth + 'px';
        canvas.style.height = oldHeight + 'px';
}