Struggling with it is the initial width of my canvas.
My setup consists of a canvas element with an image background set to cover. Using jQuery, the canvas width is set to window.innerWidth while the height is calculated as one-third of the width (to maintain proportionality and avoid cutting off or stretching the background image in this banner).
The issue arises from the canvas starting at 300 x 150 before adjusting to the screen size. This results in the banner loading initially at 300px x 150px and then quickly jumping to the correct size within a second or so.
If you'd like to see an example, check out: CodePen
function initHeader() {
width = window.innerWidth;
height = width / 3;
target = {
x: width / 2,
y: height / 3
};
canvas = document.getElementById( 'canvas' );
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext( '2d' );
Despite trying different CSS adjustments such as setting the canvas width to 100%, I've encountered issues like stretching the banner and creating unwanted gaps below it.
I've exhausted all my ideas and can't seem to find a suitable solution.
Any suggestions would be greatly appreciated!