How to display a Canvas in a Bootstrap Modal

Question

I created a map where you can book bikes via Javascript. The user is supposed to : 1) select a bike station (green station = bikes are available) 2) click on a button (reserver button) 3) sign in a canvas (in a modal)

The page is here : http://p4547.phpnet.org/bikes/reservation.html

In my javascript, the Class Object is called this way :


      document.addEventListener("DOMContentLoaded", event => {
        new Signature();

This code is working fine if the canvas is located in the body of the page. But the code is not working if the canvas is located in the modal.

I tried to code this way :

$('#bookingmodal').on('shown.bs.modal',function(event){
new Signature();

    });

My modal ID is : #bookingmodal

user_1970822 · Answer

Your problem is in the calculation of the coordinates for the mouse-position inside the canvas. If you resize the page to a really small window the drawing sometimes works (with an ugly offset).

I took your Signature-class and replaced the calculation for the mouse-position inside the canvas with a function that calculates the correct position of the mouse and also handles possible scaling of the bitmap used by the canvas:

updateMousePosition(mX, mY) {
  let rect = this.canvas.getBoundingClientRect();
  let scaleX = this.canvas.width / rect.width;
  let scaleY = this.canvas.height / rect.height;
  this.cursorX = (mX - rect.left) * scaleX;
  this.cursorY = (mY - rect.top) * scaleY;
}

Example:

class Signature {
  constructor() {
    this.color = "#000000";
    this.sign = false;
    this.begin_sign = false;
    this.width_line = 5;
    this.canvas = document.getElementById('canvas');
    this.offsetLeft = this.canvas.offsetLeft;
    this.offsetTop = this.canvas.offsetTop;
    this.context = canvas.getContext('2d');
    this.context.lineJoin = 'round';
    this.context.lineCap = 'round';
    this.whenMouseDown();
    this.whenMouseUp();
    this.whenMouseMove();
    this.createSignature();
    this.clearCanvas();
    this.resetCanvas();
  }

  updateMousePosition(mX, mY) {
    let rect = this.canvas.getBoundingClientRect();
    let scaleX = this.canvas.width / rect.width;
    let scaleY = this.canvas.height / rect.height;
    this.cursorX = (mX - rect.left) * scaleX;
    this.cursorY = (mY - rect.top) * scaleY;
  }
  
  whenMouseDown() {
    document.addEventListener("mousedown", ({
      pageX,
      pageY
    }) => {
      this.sign = true;
      this.updateMousePosition(pageX, pageY);
    })
  }

  whenMouseUp() {
    document.addEventListener("mouseup", () => {
      this.sign = false;
      this.begin_sign = false;
    })
  }

  whenMouseMove() {
    this.canvas.addEventListener('mousemove', ({
      pageX,
      pageY
    }) => {
      if (this.sign) {
        this.updateMousePosition(pageX, pageY);
        this.createSignature();
      }
    })
  }

  createSignature() {
    if (!this.begin_sign) {
      this.context.beginPath();
      this.context.moveTo(this.cursorX, this.cursorY);
      this.begin_sign = true;
    } else {
      this.context.lineTo(this.cursorX, this.cursorY);
      this.context.strokeStyle = this.color;
      this.context.lineWidth = this.width_line;
      this.context.stroke();
    }
  }

  clearCanvas() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }

  resetCanvas() {
    document.getElementById("reset").addEventListener("click", () => {
      this.clearCanvas();
    })
  }
}

document.addEventListener("DOMContentLoaded", event => {
  new Signature();
});








    
      
        
          Réservation

        
        
          
            
              
                Signature. Signez pour valider votre réservation.

How to display a Canvas in a Bootstrap Modal

1 Answers