centering issue

by shaunxcode

HTML

<div id="canvas"></div>

CSS

#canvas { width: 1000px; height: 1000px; }

JavaScript

var paper = Raphael('canvas'); 

var width = 200;
var height = 200; 

var border = paper.rect(100,100,width,height);

var someRectX = 50;
var someRectY = 200;
var someRectWidth = 400;

var someRect = paper.rect(someRectX, someRectY, someRectWidth, 120).attr('stroke', 'red');

var bb = someRect.getBBox();

var box1 = paper.rect(someRectX, someRectY, 20, 30).attr('stroke', 'red');
var box2 = paper.rect(someRectX + someRectWidth - 30, someRectY + 100, 30, 20).attr('stroke', 'red');

var scaleToFitRatio = width / someRectWidth;

var scaleTransform = [
    's',
    scaleToFitRatio,
    scaleToFitRatio,
    bb.x + (bb.width / 2),
    bb.y + (bb.height / 2)]; 

var box12 = paper
    .rect(someRectX, someRectY, 20, 30)
    .attr('stroke', 'green')
    .transform(scaleTransform);

var box2 = paper
    .rect(someRectX + someRectWidth - 30, someRectY + 100, 30, 20)
    .attr('stroke', 'green')
    .transform(scaleTransform);

var someRect2 = paper
    .rect(someRectX, someRectY, someRectWidth, 120)
    .attr('stroke', 'green')
    .transform(scaleTransform);