Why quality is lost in canvas when scaling?

E

Edward2015-09-12 15:42:53

css

Edward, 2015-09-12 15:42:53

Decided to learn canvas. For a long time I knew how vector graphics, but why when I zoom in the browser, the quality is lost. At the Microsoft conference, it was not lost.

<!DOCTYPE html>
<html>
<body>

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

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>

</body>
</html>

What then can be taught to make everything go smoothly? Or how to do it?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

R

Rafael™, 2015-09-12
@ed_milson

Browser scaling of the canvas and any other raster is done by the video card
Drawing on svg may solve your problem

A

Alexander Taratin, 2015-09-12
@Taraflex

Canvas is raster graphics, not vector graphics.