Element {x, y} coordinates in custom renderer



I am implementing custom render.
I implemented drawRectangle method as appears below.
In the debug mode I see that the rectangle is placed correctly at first - same location as replaced element.
However GraphicsFactory.prototype.update repositions it to the right bottom of the canvas.
What am I doing wrong?

export class CustomRenderer extends BaseRenderer {
drawShape(parent, element): any {
    return this.drawRectangle(parent, element);

drawRectangle(parent, element): any {

    const attrs = this.styles.computeStyle(null, {
      stroke: '#4488aa',
      strokeWidth: 4,
      fill: 'red'

    const rectangle = svgCreate('rect');

    svgAttr(rectangle, {
      x: element.x,
      y: element.y,
      height: element.height,
      width: element.width

    svgAttr(rectangle, attrs);

    svgAppend(parent, rectangle);

    return rectangle;

 getShapePath(shape): any { <---------------this one is not being called actually
    const x = shape.x,
      y = shape.y,
    const shapePath = [
      [x, y]
    return componentsToPath(shapePath);


Found an issue and a solution. Need to set x and y to zero:

svgAttr(rectangle, {
  x: 0,
  y: 0,
  height: element.height,
  width: element.width


To add a little bit more background to your solution: The GraphicsFactory ensures that elements are positioned on the appropriate place. If you are implementing your own renderer, render elements at { x: 0, y: 0 }.