У нас есть:
1. html страница со скриптом, который на белом фоне рисует в центре канваса черный квадрат.
<html>
<body>
<center>
<canvas id="canvas1"></canvas>
</center>
<script>
var canvas = document.getElementById("canvas1");
ctx = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var width = 60;
var height = 60;
ctx.lineWidth = 1;
ctx.fillStyle = "White";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "Black";
ctx.fillRect(centerX - width / 2, centerY - height / 2, width, height);
</script>
</body>
</html>
Есть стиль для канваса:
canvas {
width: 80%;
height: 65%;
border: solid 1px black;
}
Если убрать width и height, то всё хорошо, рисуется канвас, на нем черный квадрат.
Но мне нужен большой канвас, и тут изображение получается растянутым и размытым: как будто сначала происходит отрисовка, а потом уже применяется стиль, и канвас растягивается на 80 и 65 процентов относительно размеров страницы и растягивает картинку.
Как мне сначала задать размер канваса, а потом уже начать рисовать на нем?
Страница без стилей:
И со стилем(по краям квадрата видно размытие, изображение растянуто):
Средний
