Currently, I am creating a specific sized image at 1200W x 300H and then sending it back to my server once it's done. The process is functional.
However, the issue arises when the created image of 1200x300 size appears too large for many users, especially on mobile devices. Is there a method available that would allow me to create the image at 1200x300 but visually display it on a smaller scale to fit the screen?
Presently, the best solution I have come up with involves using a DIV with overflow:hidden to maintain the correct sizing on the page. However, this approach does not scale down the actual image, resulting in most of the image being off-centered, only displaying the left part on the screen.
<div style="overflow:hidden;" >
<canvas id="canvas" width="1200" height="300">
Your browser does not support Canvas.
</canvas>
</div>
Reducing the canvas size to fit the page subsequently reduces the image created to a smaller size, which is not the desired outcome to be sent back to the server.
Is there a way to achieve this objective?
============= UPDATE ================
<div style="overflow:hidden;" >
<canvas id="displayCanvas" width="1200" height="300">
Your browser does not support Canvas.
</canvas>
<canvas id="realCanvas" width="1200" height="300">
Your browser does not support Canvas.
</canvas>
</div>
#CSS
#realCanvas {
width:100vw;
height: 25vw ;
}
#JS
function buildBanner () {
Debugger.log("Drawing Canvas");
if(!canvasSupport()) {
return;
}
var wCanvas = 1200 ;
var hCanvas = 300 ;
var wImg = 400 ;
var hImg = 100 ;
var hRatio = wCanvas / wImg ;
var vRatio = hCanvas / hImg ;
var ratio = Math.min ( hRatio, vRatio );
var centerShift_x = ( wCanvas - wImg*ratio ) / 2;
var centerShift_y = ( hCanvas - hImg*ratio ) / 2;
var displayCanvas = document.getElementById('displayCanvas') ;
var displayContext = displayCanvas.getContext('2d');
var realCanvas = document.getElementById('realCanvas');
var realContext = realCanvas.getContext('2d');
...