I normally wouldn't bother with such a poorly written question.
However, today it's just a matter of cut-n-paste of code I already have, so I may-as-well try to help.
Note - both approaches display the image, only the second makes it available for saving.
<!DOCTYPE html>
<html>
<head>
<script>
function newEl(tag){return document.createElement(tag);}
window.addEventListener('load', mInit, false);
function createImageFromRGBdata(rgbData, width, height)
{
var mCanvas = newEl('canvas');
mCanvas.width = width;
mCanvas.height = height;
var mContext = mCanvas.getContext('2d');
var mImgData = mContext.createImageData(width, height);
var srcIndex=0, dstIndex=0, curPixelNum=0;
for (curPixelNum=0; curPixelNum<width*height; curPixelNum++)
{
mImgData.data[dstIndex] = rgbData[srcIndex];
mImgData.data[dstIndex+1] = rgbData[srcIndex+1];
mImgData.data[dstIndex+2] = rgbData[srcIndex+2];
mImgData.data[dstIndex+3] = 255;
srcIndex += 3;
dstIndex += 4;
}
mContext.putImageData(mImgData, 0, 0);
return mCanvas;
}
var rgbData = new Array(
0xff,0xff,0xff, 0xff,0xff,0xff, 0xff,0xff,0xff, 0xff,0xff,0xff,
0xff,0xff,0xff, 0xff,0x00,0x00, 0x00,0xff,0x00, 0xff,0xff,0xff,
0xff,0xff,0xff, 0x00,0x00,0xff, 0xff,0xff,0x00, 0xff,0xff,0xff,
0xff,0xff,0xff, 0xff,0xff,0xff, 0xff,0xff,0xff, 0xff,0xff,0xff
);
function mInit()
{
var mCanvas = createImageFromRGBdata(rgbData, 4, 4);
mCanvas.setAttribute('style', "width:64px; height:64px; border:solid 1px black");
document.body.appendChild( mCanvas );
var mImg = newEl("img");
var imgDataUrl = mCanvas.toDataURL();
mImg.src = imgDataUrl;
mImg.setAttribute('style', "width:64px; height:64px; border:solid 1px black");
document.body.appendChild(mImg);
}
</script>
<style>
</style>
</head>
<body>
</body>
</html>