I am currently facing an issue with my canvas container, which has a width of 100% and a height of 50%. When I draw lines on it using x and y coordinates like this:
context.moveTo(20, 20);
context.lineTo(50, 20);
context.stroke();
The problem arises when I resize the canvas by resizing the browser window. The drawn lines do not adjust to the new canvas size as shown in this image: https://i.sstatic.net/SgdrM.png
This is how I resize the canvas:
var scale = window.devicePixelRatio;
this.canvas.width = Math.floor(parseInt(this.$canvasPage.css('width')) * scale);
this.canvas.height = Math.floor(parseInt(this.$canvasPage.css('height')) * scale);
this.context.scale(scale, scale);
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.drawContent();
Does anyone have any suggestions on how to fix this issue? I was thinking about calculating x and y positions but I'm unsure of the maximum coordinates. Are there any better solutions for this problem? I also plan to add rectangles, input fields, and more elements later.
Thank you for your assistance!