Плохое качество для 100% ширины и высоты холста
Я сделал очень маленький пример с canvas, он доступен наJsFiddle:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#myCanvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById( "myCanvas" );
var context = canvas.getContext( "2d" );
context.id = "myContext";
context.beginPath();
context.arc( 95, 50, 40, 0, 2 * Math.PI );
context.stroke();
setTimeout( function() {
var rectWidth = 150;
var rectHeight = 75;
context.fillStyle = "blue";
context.fillRect( rectWidth / -2, rectHeight / -2, rectWidth, rectHeight );
}, 2000 );
</script>
</body>
</html>
Как вы можете видеть, результат рендеринга имеет очень низкое качество:
Итак, мне интересно, как я могу рисовать различные фигуры, используяхолст в хорошем качестве, я не хочу рисовать маленьким размером, я хочу рисовать на 100% размера страницы.
Итак, может быть, я не определил какой-нибудь фильтр сглаживания или что-то еще?
Спасибо!