Recently, I developed a function with the goal of redrawing a square line block that covers the entire page whenever the window size is adjusted.
For reference, you can view my code at http://jsfiddle.net/9hVnZ/
However, I encountered an issue:
bgCtx.clearRect(0, 0, bgCtx.width, bgCtx.height);
This code snippet did not work as expected. Despite resizing my Chrome browser window, the previous red lines remained visible on the screen.
A screenshot showcasing this problem can be found here: https://i.stack.imgur.com/sSYvT.png
In an attempt to troubleshoot, I reviewed other answered questions and realized that some solutions included missing bgCtx.beginPath();. However, I made sure to include it in my code. Additionally, trying bgCtx.width = bgCtx.width; did not yield any success. Am I overlooking something or is there an error in my approach?
If anyone has any suggestions or insights on how to resolve this issue, your input would be greatly appreciated :)