Make a canvas infinite

Question

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.

Answer 1

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){
        addRandomObjects();
    }
    // 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 = [];

var addRandomObjects = function(){
    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(); 
window.addEventListener("resize",resizeCanvas); 

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

/** SimpleFullCanvasMouse.js end **/