a circle gets distorted in canvas

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

  •  15-07-2023
  •  | 
  •  

Вопрос

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>
Это было полезно?

Решение

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top