a circle gets distorted in canvas

StackOverflow https://stackoverflow.com/questions/23477980

  •  15-07-2023
  •  | 
  •  

Question

trying to draw a simple circle .but it is getting distorted .and the color is also fade.why is that happening?

<html>
<body>
<script>
function makeit(){
var canvas=document.createElement('canvas');
var atts=document.createAttribute('style');


atts.value="width:400px;height:400px;border:1px solid black;";
canvas.setAttributeNode(atts);

document.body.appendChild(canvas);

var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="black";
ctx.arc(100,100,25,0,2*Math.PI);
ctx.stroke();
}
window.onload=makeit;
</script>
</body>
</html>
Was it helpful?

Solution

this is because you set the width and height over the style object. try canvas.width= canvas.height=

style.width style.height defines the appearance of canvas in the html dom.

canvas.width canvas.height defines the canvas width and height...

for example if you define a canvas width and height with 400 and 400. and you want canvas to show with 800px width and 800 px height over the style object. it gets distorted because of resizing to bigger multiplied each dimension by 2.

normally its 1 to 1

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top