Why doesn't the Canvas appear on the bootstrap table?

I have a Bootstrap table and as a table data I need to put a Canvas which is writable. But When I put the canvas it appears but the writing content doesn’t appear properly or it doesn’t appear at all. When I move the canvas from the table and put it on either the container or just the body it works. The code can be found below. What would be the reason for this and how can I fix it? Thanks in advance.

$(document).ready(function() {
    function createCanvas(parent, width, height) {
    var canvas = document.getElementById("inputCanvas");
    canvas.context = canvas.getContext('2d');
    return canvas;
  }

  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo("#fff");

    canvas.onmousemove = function(e) {
      if (!canvas.isDrawing) {
        return;
      }
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 10;
      var fillColor = 'rgb(102,153,255)';
      ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.onmousedown = function(e) {
      canvas.isDrawing = true;
    };
    canvas.onmouseup = function(e) {
      canvas.isDrawing = false;
    };
  }

  var container = document.getElementById('inputCanvas');
  init(container, 200, 200, '#dddd');

});
#inputCanvas{
    border: 5px solid rgb(102,153,255);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="container">
     <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col" style="text-align:center">Pick an image File</th>
            <th scope="col" style="text-align:center">Draw a Number</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <form method="post" action="/upload" enctype="multipart/form-data">
                    <div class="d-flex justify-content-center">
                        <div class="form-group">
                            <input type="file" class="form-control-file" name="img" accept="image/*" id="img"
                                   aria-describedby="fileHelpId">
                        </div>
                    </div>
                    <div class="col text-center">
                        <input type="submit" value="Submit" class="btn btn-primary">
                    </div>
                </form>
            </td>
            <td>
               <canvas id="inputCanvas" width="400" height="400"></canvas>
            </td>
        </tr>
        <tr>
            <th colspan="2" style="text-align:center">
                Predicted Number
            </th>
        </tr>
        </tbody>
    </table>
</div>

19 thoughts on “Why doesn't the Canvas appear on the bootstrap table?”

  1. Change:

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    

    To:

    var xy = this.getBoundingClientRect();
          
    var x = e.pageX - xy.left;
    var y = e.pageY - xy.top;
    

    The reason why this.offsetLeft doesn’t work when it is inside a table is because you get the offsetLeft relative to its parent rather than relative to the browser window.

    Reply

Leave a Comment