# Make a canvas infinite

I am currently using a canvas on which I drew some areas of interest. They consist in squares and can be moved by a mouse click (i.e : a selected area will center on my cursor position everytime I click on the canvas).

My current problem is that I would like to add the following feature: When I click near the edge of the canvas (either left or right), if a portion of the square is off-canvas, I want this off-canvas portion to appear at the opposite edfe.

Example: If I click near the right edge of the canvas, the hidden portion should appear on the left.

To be honest, I don't have any clue on how to do this properly. It seems to me that it requires a really heavy solution (with a lot of loops).

Your help would be very appreciated. The simple way to do this is

You have an object with width height, x,and y

``````obj = { x :?, y : ?, w : ? , h: ?}
``````

You draw it

``````ctx.fillRect(obj.x, obj.y, obj.w, obj.h);
``````

You have the screen/canvas size

``````canW = ?;
canH = ?;
``````

When you draw the object check if it is touching the right edge. If so draw it again on the left side

``````if(obj.x + obj.w > canW){
ctx.fillRect(obj.x - canW,obj.y, obj.w, obj.h);
``````

Now as you are on the left side check that it's not on the bottom edge if it is draw it again at the top

``````   if(obj.y + obj.h > canH){
ctx.fillRect(obj.x - canW, obj.y - canH, obj.w, obj.h);
}
``````

}

And the same for the bottom, But ass you have already done the top left in the above render you only need check this time for the bottom top

``````if(obj.y + obj.h > canH){
ctx.fillRect(obj.x, obj.y - canH, obj.w, obj.h);
}
``````

And you are done.

Demo shows a random infinite scrolling colored box scene.

``````var onResize;
function display(){  //
ctx.setTransform(1,0,0,1,0,0); // reset transform
ctx.globalAlpha = 1;           // reset alpha
ctx.clearRect(0,0,w,h);
if(array.length === 0){
}
// move the scene;
offsetDX += (Math.random() + Math.random() + Math.random())/3 -0.5;
offsetDY += (Math.random() + Math.random() + Math.random())/3 -0.5;
offsetDX = Math.max(-4,Math.min(4,offsetDX));
offsetDY = Math.max(-4,Math.min(4,offsetDY));
offsetX += offsetDX;
offsetY += offsetDY;
offsetX = ((offsetX % w) + w) % w;
offsetY = ((offsetY % h) + h) % h;

// draw the scene;
drawObjects();

}
var offsetX = 0;
var offsetY = 0;
var offsetDX = 0;
var offsetDY = 0;

var drawObjects = function(){
var ox = offsetX;  // get the offset
var oy = offsetY;
for(i = 0; i < array.length; i ++){ // do each object
var a = array[i];
var x = (a.x + ox)%w;
var y = (a.y + oy)%h;
ctx.fillStyle = a.col;
ctx.fillRect(x,y,a.w,a.h); // draw it
if(x+a.w > w){  // if touching right edge draw again at left
ctx.fillRect(x-w,y,a.w,a.h);
if(y+a.h > h){
ctx.fillRect(x-w,y-h,a.w,a.h);
}

}
if(y+a.h > h){ // if touching bottom draw again at top
ctx.fillRect(x,y-h,a.w,a.h);
}
}

}

var array = [];

for(i = 0; i < 50; i++){
var hue = Math.floor(Math.random() * 360);
array.push({
x: Math.random() * w,
y : Math.random() * h,
w : Math.max(50,Math.random() * (w * h * 0.0004)),
h : Math.max(80,Math.random() * (w * h * 0.0004)),
col: "hsla("+hue+",100%,50%,0.5)",
})
}
}

var onResize = function(){
array = [];
}

/** SimpleFullCanvasMouse.js begin **/
//==================================================================================================
// The following code is boilerplate code that provides me with a standard interface to various forums.
// It provides a mouse interface, a full screen canvas, and some global often used variable
// like canvas, ctx, mouse, w, h (width and height), globalTime
// This code is not intended to be part of the answer unless specified and has been formated to reduce
// display size. It should not be used as an example of how to write a canvas interface.
// By Blindman67
const U = undefined;const RESIZE_DEBOUNCE_TIME = 100;
var w,h,cw,ch,canvas,ctx,mouse,createCanvas,resizeCanvas,setGlobals,globalTime=0,resizeCount = 0;
var L = typeof log === "function" ? log : function(d){ console.log(d); }
createCanvas = function () { var c,cs; cs = (c = document.createElement("canvas")).style; cs.position = "absolute"; cs.top = cs.left = "0px"; cs.zIndex = 1000; document.body.appendChild(c); return c;}
resizeCanvas = function () {
if (canvas === U) { canvas = createCanvas(); } canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext("2d");
if (typeof setGlobals === "function") { setGlobals(); } if (typeof onResize === "function"){ resizeCount += 1; setTimeout(debounceResize,RESIZE_DEBOUNCE_TIME);}
}
function debounceResize(){ resizeCount -= 1; if(resizeCount <= 0){ onResize();}}
setGlobals = function(){ cw = (w = canvas.width) / 2; ch = (h = canvas.height) / 2; }

resizeCanvas();

function update(timer){ // Main update loop
globalTime = timer;
display();  // call demo code
requestAnimationFrame(update);
}
requestAnimationFrame(update);

/** SimpleFullCanvasMouse.js end **/``````