Search code examples
javascriptangularfabricjs

fabricjs image placing alignment issue

i was using fabricjs for image upload and bootstrap for css after upload the image preview is coming in the top.

When i click the image hsa to come in the right side but it's coming in the bottom.

Here is my html

        <div class="container-fluid" style="border:1px solid red">
      <div class="row">
        <div class="col-md-6">
          <img *ngFor="let item of urls" (click)="onClik(item)"  [src]="item.url" class="rounded mb-3" width="180">
          <input type="file" multiple (change)="detectFiles($event)">
          <br/>
          <h1>Preview</h1>
        </div>
        <div class="col-md-6">
          <div id="mainarea">
          </div>
        </div>
      </div>
    </div>

Here is my stackblitz link

Example how my image is showing now

enter image description here

Solution

  • The main problem is that you are not attaching the newly created canvases to your container element (in fact, you just declare container but you don't use it at all), but to the body element. So, instead of

    this.renderer.appendChild(document.body, newCanvas);

    you should do

    this.rendered.appendChild(this.container, newCanvas);

    Also, it's likely that you will have to add display: flex to the container div, in order for the canvases to appear side by side.