How to draw correct circle on canvas?

Question

JavaScript

Hello, I'm new to canvas. In general, there is a block, width 80% relative to the window, height 400px. Inside the canvas, with a width and height of 100%. drew a circle

ctx.beginPath();
  ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
  ctx.stroke();

it turned out

Why so? ps but when saving the drawing, it renders the correct circle.

Answer 1

but when saving the drawing, it renders the correct circle.

The canvas needs to be pulled not with styles, but through setting width and height

Answer 2

https://jsfiddle.net/o918pe7w/2/