canvasのimageData

 const imagedata:ImageData = context.createImageData(sw,sh)

sw,sh 単位はCSSピクセル ImageDataを作成して返却 返却されたピクセルはすべて透明な黒

sw,shの代わりにimagedataを渡しても良い。 その場合、渡したimagedataの寸法の 新たなImageDataが作成される。すべて透明な黒

 const imagedata:ImageData = context.getImageData(sx,sy,sw,sh)

canvasの指定矩形のimagaDataを返す。

引数が有限でもないか0であればNOT_SUPPORTED_ERR , INDEX_SIZE_ERR を投げる。

imagedata.width
imagedata.height

データの実際の寸法で単位はピクセル

imagedata.data

RGBAの順番で１次元配列で0 ～ 255の範囲

context.putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ])

imageDataを描画、dirtyを与えると特定の矩形のピクセルだけ描画

ImageData

interface ImageData {
    /**
     * Returns the one-dimensional array containing the data in RGBA order, as integers in the
     * range 0 to 255.
     */
    readonly data: Uint8ClampedArray;
    /**
     * Returns the actual dimensions of the data in the ImageData object, in
     * pixels.
     */
    readonly height: number;
    readonly width: number;
}

canvasのコンテキスト

    getContext(contextId: "2d", contextAttributes?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D | null;

CanvasRenderingContext2DSettingsの設定

interface CanvasRenderingContext2DSettings {
    alpha?: boolean;
}

alphaはcanvasにアルファ値が含まれているかどうか、falseに指定するとブラウザは背景が不透明であることがわかるので描画が高速化される。