Sluggishness
Memory limits
Take a look at a random folder of images on your computer, and observe it's size. Thousands of images will amount to gigabytes of space, which means all that needs to be loaded into memory. You can simply not do that reliably.
There is also not really a point in rendering things that the user cannot see.
Thousands or millions of images?
Consider why you think you need to display thousands or millions of images. Consider a pretty sizeable screen of 1920 by 1080 pixels. If you have 30 pixels in width and 30 pixels of height, you can fit 60 * 36, or 2304 images on screen. At some point you will not be able to make out anything.
Multiple canvas elements
There does not seem to be a reason to use multiple canvas elements. If you want a background with hundreds of images, you can redraw the same canvas as you scroll. In fact, this is probably the best way of dealing with your current situation.
Coding style
Wrap your code in an IIFE
Wrap your code in an Immediately Invoked Function Expression. This causes the variables to not spill into other code you or others write. An IIFE looks something like this:
(function () {
// ...
})();
Look at your variable names
Some of your variable names do not really make sense. cInt seems an iteration of your canvas element. I am not sure why you use loopCInt at all. Replace it with canvasIdentifier or canvasIteration. canvasName is actually a CanvasElement, not a name. goDown looks like a function name at first glance, but is actually the number of pixels from the top, so just name it top. right is actually what you would refer to as left if you worked with absolutely positioned elements, namely the number of pixels from the left edge.
Bookkeeping
You are using a while loop, and because of that have a lot of lines related to bookkeeping. Since you are managing both a row and a column in a single loop, it is not very readable either. I would recommend replacing it with two for loops.
Factor out functions
You want to start factoring out functions with some kind of behaviour earlier than later in your code. You currently have one giant blob of code that, while it does what you want to do, is a nightmare to read through when you expand it. A pretty obvious thing to abstract out is to move things to draw the scene into their own function. You can then call that function to draw or redraw things.
Factor out magic numbers/strings
You currently set "1000" for the width and height, and draw squares of 30 by 30. Move these numbers/strings to their own variable that you can easily change. This allows you to re-use them and quickly change them when you decide, for example, to have a border of 10 pixels around your canvas.
Example
Below I applied some of these to your code. I also put in an example where the canvas is redrawn when you scroll the screen. I added a random number generator that can be seeded, so that I can show off that you can create a consistent screen. You can probably improve on that, considering that it now generates too many colors.
// https://stackoverflow.com/a/19301306/2209007
function RandomGenerator() {
var m_w = 123456789;
var m_z = 987654321;
var mask = 0xffffffff;
// Takes any integer
this.seed = function(i) {
m_w = i;
m_z = 987654321;
}
// Returns number between 0 (inclusive) and 1.0 (exclusive),
// just like Math.random().
this.random = function()
{
m_z = (36969 * (m_z & 65535) + (m_z >> 16)) & mask;
m_w = (18000 * (m_w & 65535) + (m_w >> 16)) & mask;
var result = ((m_z << 16) + m_w) & mask;
result /= 4294967296;
return result + 0.5;
}
this.randomHexColor = function()
{
var hexFFFFFF = 16777215;
return '#' + Math.floor(this.random() * hexFFFFFF).toString(16);
}
}
(function() {
var canvas = document.getElementById('background-canvas');
var ctx = canvas.getContext("2d");
var windowWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
canvas.setAttribute('width', windowWidth);
canvas.setAttribute('height', windowHeight);
var imageWidth = 30;
var imageHeight = 30;
var randomGenerator = new RandomGenerator();
function draw(offset)
{
window.requestAnimationFrame(function () {
randomGenerator.seed(1);
for (var top = -offset; top < windowHeight; top += imageHeight) {
for (var left = 0; left < windowWidth; left += imageWidth) {
if (offset < -imageHeight) {
randomGenerator.randomHexColor();
continue;
}
ctx.beginPath();
ctx.rect(left, top, imageWidth, imageHeight);
ctx.fillStyle = randomGenerator.randomHexColor();
ctx.fill();
}
}
});
}
draw(0);
document.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
draw(scrollTop);
});
})();
#background-canvas {
width: 100vw;
height: 100vh;
position: fixed;
top: 10px;
left: 10px;
z-index: -1;
}
body {
height: 200vh;
}
<canvas id="background-canvas"></canvas>
