I have this script and markup.
<canvas id="myCanvas" style="width:100px; height:100px; background-color:aqua" >
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 10;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
</script>
The problem is , the browser depicts an eclipse instead of circle. why is it?
You have distorted your canvas by changing its size with CSS styles. Instead, set its size using the height and width properties directly on the tag:
<canvas id="myCanvas" width="100" height="100" style="background-color:aqua">
The circle-to-elipse distortion arises because canvas are by default wider than they are tall, but you have used CSS to force the browser to render a wide rectangle of canvas pixels as a square. By using height and width properties, you change the number of pixels in the canvas, instead of changing the size they occupy.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments