0

I am currently working on the following project: I am uploading a picture from my computre which I then show on my page on a canvas. Now all I want to do is, draw some rectangles on the picture and get the coordinates of those.

However, it seems that the rectangles I draw are somehow behind the background picture. I can see (in the console) that the created div is inside the canvas (the rectangle) but it is not shown on the background image. I tried to change the z-index but that does not seem to help.

Does anyone know what I am doing wrong? Does that even work that way?

(I got the rectangle drawing code from here)

This is my code so far (ts):

export class AppComponent {
  title = 'app';

  public buildings = [ ];
  public showUploader = true;

  constructor() { }

  public getImages() {
    this.buildings = document.getElementById('imageImport')['files'];
    const reader = new FileReader();

    reader.onload = function (e) {
      const canvas: any = document.getElementById('imageCanvas');
      const ctx = canvas.getContext('2d');
      const img: any = new Image();
      img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
      };
      img.src = e.target['result'];
    };
    reader.readAsDataURL(this.buildings[0]);
    this.showUploader = false;
    this.initDraw(document.getElementById('imageCanvas'));
  }

  public initDraw(canvas) {
    function setMousePosition(e) {
      const ev = e || window.event;
      if (ev.pageX) {
        mouse.x = ev.pageX + window.pageXOffset;
        mouse.y = ev.pageY + window.pageYOffset;
      } else if (ev.clientX) {
        mouse.x = ev.clientX + document.body.scrollLeft;
        mouse.y = ev.clientY + document.body.scrollTop;
      }
    }

    const mouse = {
      x: 0,
      y: 0,
      startX: 0,
      startY: 0
    };
    let element = null;

    canvas.onmousemove = function (e) {
      setMousePosition(e);
      if (element !== null) {
        element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
        element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
        element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
        element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
      }
    };

    canvas.onclick = function (e) {
      if (element !== null) {
        element = null;
        canvas.style.cursor = 'default';
        console.log('finsihed.');
      } else {
        console.log('begun.');
        mouse.startX = mouse.x;
        mouse.startY = mouse.y;
        element = document.createElement('div');
        element.className = 'rectangle';
        element.style.left = mouse.x + 'px';
        element.style.top = mouse.y + 'px';
        canvas.appendChild(element);
        canvas.style.cursor = 'crosshair';
      }
    };
  }

}

and the html:

  <input id="imageImport" type="file" multiple="multiple" (change)=getImages() *ngIf="showUploader"/>

  <div>
      <canvas id="imageCanvas"> </canvas>
  </div>
threxx
  • 1,213
  • 1
  • 31
  • 59
  • 2
    Why not just *draw* a rectangle on the canvas? – Spencer Wieczorek Nov 06 '17 at 21:43
  • Do you mean to be creating `
    ` over your canvas instead of drawing rectangles directly on to your canvas? I can see the value in either, but I would kind of expect you to be drawing rectangles directly onto the canvas 2D context instead of making new DOM elements. Do you understand what I mean?
     – zero298 Nov 06 '17 at 21:43
  • @SpencerWieczorek I want to highlight specific parts of the background image so i need that image. Or please explain how i just draw a rectangle on the canvas? – threxx Nov 06 '17 at 21:44
  • @zero298 so you mean I should just delete the div? i added it as i thought i might help but it does really nothing – threxx Nov 06 '17 at 21:45
  • You are mixing DOM land and 2DContextLand in a weird way. I would expect you to be using [`strokeRect()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeRect) rather than creating `
    `. Given your description, that's what makes more sense.
     – zero298 Nov 06 '17 at 21:47
  • @zero298 could you kind of show or explain me in more details how this would work? I am kind of new to canvas stuff – threxx Nov 06 '17 at 21:49
  • 1
    Look further down in the question that you linked. There is an example showing how to use `strokeRect()` here: [Drawing a rectangle using click, mouse move, and click](https://stackoverflow.com/a/17408474/691711). – zero298 Nov 06 '17 at 21:51

1 Answers1

0

you can try using canvas.parentElement.appendChild(element). This way you can see the you DIV.

We need to append the child to the parent element of the canvas, not directly to the canvas.

sharath222
  • 13
  • 5