How to create infinite raphael canvas

Question

I created a raphael canvas. There are some draggable circle and rectangle on it. A problem is when I dragged the object to the bottom, the object appeared "half circle" or "half rectangle" and the canvas cannot be extended as the drag movement. How can I create the "infinite" canvas that allows me to drag the object in a larger space.

I am thinking about using viewbox or scroller bar? But seems like scroller bar also have the limit right? Basically, I have no idea about the borderless canvas. Anyone can help?

Answer 1

One solution is to perform a check on all your objects to see if they're inside or outside your current canvas size. If it's outside, you give the canvas new width/height.

Here's a working example (although not using dragable objects) just to show the idea:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
    c.width = 50;
    c.height = 50;
var myObjects = new Array();

var negativeOffSetX = 0;
var negativeOffSetY = 0;

myObjects[0] = new object("rect",15,30,0,50,50);
myObjects[1] = new object("rect",45,10,0,50,75);
myObjects[2] = new object("circle",0,0,5,200,200);
myObjects[3] = new object("rect",50,20,0,-50,-80);

function object(oType,w,h,r,x,y) {
    this.oType = oType;
    this.w = w;
    this.h = h
    this.r = r;
    this.x = x;
    this.y = y;
}

function drawCircle(r,x,y) {
    ctx.beginPath();
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.stroke();
}

function drawRectangle(w,h,x,y) {
    //I want the x,y coordinates to be the center of the rect.  
    var edgeX = x-w/2;
    var edgeY = y-h/2;
    ctx.strokeRect(edgeX,edgeY,w,h);
}

function paint() {
    for (var i = 0; i<myObjects.length; i++) {
        var o = myObjects[i];
        if (o.oType == "rect") {
            drawRectangle(o.w,o.h,o.x+negativeOffSetX,o.y+negativeOffSetY);
        }
        else {
            drawCircle(o.r,o.x+negativeOffSetX,o.y+negativeOffSetY);    
        }
    }
    
    ctx.beginPath();
    ctx.arc(negativeOffSetX,negativeOffSetY,5,0,2*Math.PI);
    ctx.fillStyle="red";
    ctx.fill();
    ctx.fillStyle="black";
    ctx.fillText("(0,0)",negativeOffSetX,negativeOffSetY+15);
}


function adjustCanvasSize() {
    var maxWidth = c.width;
    var maxHeight = c.height;
    
    var minWidth = 0;
    var minHeight = 0;
    for (var i = 0; i<myObjects.length; i++) {
        var o = myObjects[i];
        if (o.oType == "rect") {
            if (o.x+o.w/2 > maxWidth) {
                maxWidth = o.x+o.w/2;
            }
            if (o.y+o.h/2 > maxHeight) {
                maxHeight = o.y+o.h/2;
            }
            
            if (o.x-o.w/2 < minWidth) {
                minWidth = o.x-o.w/2;
            }
            if (o.y-o.h/2 < minHeight) {
                minHeight = o.y-o.h/2;
            }
        }
        else {
            if (o.x+o.r > maxWidth) {
                maxWidth = o.x+o.r;
            } 
            if (o.y+o.r > maxHeight) {
                maxHeight = o.y+o.r;
            }  
            if (o.x-o.r < minWidth) {
                minWidth = o.x-o.r;
            } 
            if (o.y-o.r < minHeight) {
                minHeight = o.y-o.r;
            }
        }
    }
    negativeOffSetX = -minWidth;
    negativeOffSetY = -minHeight;
    c.width = maxWidth+negativeOffSetX;
    c.height = maxHeight+negativeOffSetY;
}
adjustCanvasSize();
paint();

canvas {
    border: 1px solid grey;
}

The original size of the canvas is 50x50. Center point (0,0) is indicated by the red dot
<canvas id="canvas"></canvas>

See fiddle in order to play around with the variables.