Рисование холста на другом холсте размыто.Как я могу это исправить?

Question

Я работал с некоторыми экспериментами по холсту HTML5 и провел серию технических экспериментов edit https://github.com/AlexChesser/jsSprite (ключи WSAD, Q, E, X на демоверсиях клавиш Minotaur, добавьте C и B на демо Zombie)

Если вы посмотрите на демонстрацию № 1: 01-draw_minotaur.php, вы увидите изображение, нарисованное прямо на холсте, и оно выглядит красиво и четко.

Однако, если вы сравните с демонстрацией, где я поместил Минотавр на холст, а затем нарисуйте этот холст на родительском, результат будет размытым: 03-drawn_minotaur_on_canvas.php

Как я могу убедиться, что холст на холсте не размыт?

РЕДАКТИРОВАТЬ полный код на GIT: https://github.com/AlexChesser/jsSprite

edit2: обратите внимание, что Google пометил мой домен как вредоносное ПО (что справедливо, поскольку хостинг-провайдер был взломан, был короткий момент, когда там было какое-то вредоносное ПО) вместо того, чтобы оставить уязвимую ссылку, я обновил, чтобы указать исключительно на источник в github.

Answer 1

Это сложно!

Для холста вы фактически не используете стиль для определения его ширины и высоты.

Таким образом, устанавливая стиль холста, вы на самом делеискажая холст.

Так что запись <canvas id="game" width=512 height=512> </canvas> на главной странице решит вашу проблему.

Я проверил это, чтобы убедиться, что это действительно проблема, поэтому, если что-то не так, позвольтезнаю, и я пришлю вам свой код.

Кроме того, это не должно быть просто MainContext.drawImage(m.canvas, 0, 0);?Иначе ты давишь Минотавра?