Javascript add new pixels to Image() variable

I am currently creating a procedural 2d world for a game in a html canvas. Currently I am storing all the individual pixels that make up the world in an array. I need to draw this world to the canvas and if I were to draw all of the world's pixels to the screen as separate draw calls it would cause serious performance issues. I want to draw the world as a number of large images containing many of these pixels to reduce the number of draw calls and improve performance. So I want to be able to create a new image variable like this:

var img = new Image();

and add the pixel data from the array to the image within the variable and then draw img to the html canvas.

So how to I add individual pixels to img using javascript.

I hope that makes sense. If you have any questions please feel free to ask.

Many thanks, Thomas