I created a basic three.js boxplot that loads individual jpg images for each mesh (bar). The boxplot appears fine on desktop, but is stretched/distorted on mobile devices. Is there a recommended approach to make it responsive?
For simplicity, I will use example public URLs for each mesh.
Here is the code snippet:
<canvas id="threeBoxPlot"></canvas>
<style>
#threeBoxPlot {
position: absolute;
top: 10500px;
left: 100px;
width: 100%;
height: 100%;
display: block;
}
</style>
<script>
initiateThree();
function initiateThree() {
// JavaScript code goes here
}
// Rest of the JavaScript code...
</script>