How to create point at left edge mid of rectangle in raphael js

Question

I am trying to create a circle at the left edge middle point of the rectangle. But it not creating.

<script type="text/javascript">
        window.onload = function () {
            var paper = Raphael(0,0, 500, 500);
            
            //var rect2 = paper.rect(20, 50, 100, 50).attr({ fill: "orange" });
            var cx =100, cy = 100;
            var w =120, h = 80;
            var lmx = cx - w/2;
            var lmy = cy;// - h/2;

            var rec = paper.rect(cx, cy, w, h, 20);
            //Mid point circle
            var cir = paper.circle(lmx, lmy, 1);
           
           // var cir = paper.circle(cx, cy, 20);

// to position in the middle, just do this
//var rec = paper.rect(cx - 120/2, cy - 80/2, 120, 80);
        };
    </script>

It creating some where else.

Red - It creating there
Green - I need to create at the left edge middle point.

What can I try to resolve this?

Answer 1

<rect> elements are drawn from a point defined by x an y attributes - unlike <circle> elements that are drawn around the cx/cy center point.

So your current cx variable is actually x.

window.onload = function() {
  var paper = Raphael(0, 0, 500, 500);

  //var rect2 = paper.rect(20, 50, 100, 50).attr({ fill: "orange" });
  var x = 100,
    y = 100;
  var w = 120,
    h = 80;
  var lmx = x;
  var lmy = y + h / 2; // - h/2;

  var rec = paper.rect(x, y, w, h, 20);
  //Mid point circle
  var cir = paper.circle(x, lmy, 3).attr({
    fill: 'green'
  });

};

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>