HTML5 canvas context getImageData 편집하기

canvas상의 이미지를 픽셀단위의 array로 반환한다.

==반환값==

*각 픽셀은 네 개의 1바이트 값(적색, 녹색, 파란색, 알파, 순서대로 "RGBA" 형식)으로 표현
*각 색상 구성요소는 0 ~ 255 사이의 정수로 표시
*각 구성요소는 배열 내에서 연속적인 색 바이트 값이 할당되며, 최상단 좌측 픽셀의 빨간색 구성요소는 배열 내의 인덱스 0에 위치
*픽셀은 배열 전체에 걸쳐 왼쪽에서 오른쪽으로, 그 다음 아래로 진행
*높이 × 너비 × 4바이트를 포함합니다. 배열의 인덱스 번호는 0부터 (높이 × 너비 × 4바이트) – 1까지 의 범위

==예제 함수==

* 특정 offset의 RGBA 값 확인하기
<syntaxhighlight lang="javascript" line="1">
getRBG = function(x, y) {
    var offset = imgWidth * y + x;
    return {
        red:     data[offset * 4],
        green:   data[offset * 4 + 1],
        blue:    data[offset * 4 + 2],
        opacity: data[offset * 4 + 3]
    };
}
</syntaxhighlight>
설명	입력하는 내용	문서에 나오는 결과
기울임꼴	''기울인 글씨''	기울인 글씨
굵게	'''굵은 글씨'''	굵은 글씨
굵고 기울인 글씨	'''''굵고 기울인 글씨'''''	*굵고 기울인 글씨*