I'm facing an issue with displaying a writable Canvas inside a Bootstrap table. When I place the Canvas within the table, the content doesn't show up properly or sometimes not at all. However, when I move the Canvas out of the table and place it in either the container or body, it works perfectly fine. Below is the code snippet for reference. Can anyone help me understand why this happens and suggest a solution? Thank you 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>