HTML画布中的宽高比，高度/宽度

Question

I have a square in which I want to draw a simple point, The square width & height defined in percentage. the problem is that the point comes out wrong (oval shaped).

I've created the following jsfiddle which reflects my issue:

https://jsfiddle.net/uhycv0pj/

<div style="width: 200px; height:200px; border:1px solid #d3d3d3;">
    <canvas id="myCanvas" style="width: 100%; height:100%; border:1px solid #d3d3d3;"></canvas>
</div>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(50, 50, 10, 0, 2 * Math.PI);
    ctx.fill();
</script>

Answer 1

You have to define the size of the Canvas in Pixels first:

var c = document.getElementById("myCanvas");
c.width = 200
c.height = 200

You can also do it by "100%" with:

var c = document.getElementById("myCanvas");
c.width = c.parentElement.clientWidth
c.height = c.parentElement.clientHeight

But remember, this wont change if your parent-element's width/height change. You will have to do it again - and setting a canvas' width/height will delete it's content, so you will have to draw it again.

DEMO:

 var c = document.getElementById("myCanvas"); c.width = c.parentElement.clientWidth c.height = c.parentElement.clientHeight var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(50, 50, 10, 0, 2 * Math.PI); ctx.fill(); 

 <div style="width: 200px; height:200px; border:1px solid #d3d3d3;"> <canvas id="myCanvas" style="width: 200px; height:200px; border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> </div>