title: HTML5 Canvas - Resize elements correctly
body: <p>I currently have a canvas container with a width of 100% width and 50% height. Whenever I draw something like lines, I have to pass x and y coordinates to it:</p>
  <pre><code>context.moveTo(20, 20);
  context.lineTo(50, 20);
  context.stroke();
  </code></pre>
  <p>Unfortunately, whenever I resize the canvas (by resizing the browser), the line still have the same dimension as before and will not adjust to it's canvas size like seen in the picture:
  <a href="https://i.stack.imgur.com/SgdrM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SgdrM.png" alt="enter image description here" /></a></p>
  <p>This is how I actually resize:</p>
  <pre><code>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();
  </code></pre>
  <p>Does anyone have an idea how to fix this? I also thought about something like calculating x and y positions but I do not know the maximum coordinates. Or are there any better ways?
  Later, it I'm planning to add rectangles, input fields, and so on...</p>
  <p>Thank you for helping!</p>