используя drawImage() рассматривая устройствоPixelRatio делает изображение великолепным, но текст, формы выглядят странно

Question

У меня есть холст, который учитывает devicePixelRatio.

Это делает текст и фигуры красивыми на так называемых сетчатых дисплеях (текст резкий, формы более плавные и т. Д.).

Выполнение этого делает отображение изображения ОЧЕНЬ НИКОГДА, то есть изображение 1000x500 отлично смотрится на холсте 500x250. Хорошо.

ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio); 

Однако, когда это делать, остальное оказанной вещи есть тексты и форма выглядят как они оказали двойные, и вещи, которые отображаются один раз, но должна впоследствии исчезнуть (это игра, где фигуры должны исчезнуть) оставайтесь на холсте, как будто он полностью неисправен.

Выполнение этого

ctx.drawImage(img, 0, 0, img.width, img.height) 

с изображением, которое 500x250 делает изображение несколько размытым, как все изображения в Интернете, который не учитывает «2x» ситуацию, но все остальные формы и тексты отображаются нормально, и теперь логика работает так, как ожидалось.

Возможно, я совершу ошибку новобранец. Есть идеи? Благодарю.

EDIT Просто чтобы предоставить дополнительную информацию. Использование drawImage на холсте с шириной ширины 1000x500 x (но css 500x250) делает не Позвольте мне просто использовать изображение размером 1000x500 и визуализировать его без разделения высоты и ширины этого изображения на devicePixelRatio. Это меня озадачивает. Почему вам все равно нужно будет

ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio) 

чтобы получить его правильно?

EDIT 2 Я знаю, что вы будете вздыхать (если вы все еще читаете), но это, кажется, на самом деле связано с оказанием PNG-изображения. Рендеринг GIF работает отлично. Как и JPG. Однако у PNG есть некоторые реальные проблемы. Я не могу понять, что я делаю неправильно. Изображение получает черную рамку вокруг (если эта информация помогает), при рендеринге png, то есть, и текст и другие вещи, которые отображаются, выглядят так же, как и черные границы; выглядит странно. Как в Chrome, так и в Safari.

Answer 1

Нашел ответ самостоятельно.

Проблема При отображении 2x-изображение на холсте, что составляет половину размера изображения (для того, чтобы дать сетчатку показывает резкое выглядящее изображение), все хорошо до тех пор, пока вы не отображать PNG-изображения с альфа-прозрачностью, установленные ниже, чем непрозрачные.

Решение Перед вызовом

ctx.drawImage(img, 0, 0, img.width/ratio, img.height/ratio) 

вызов

ctx.clearRect(0, 0, canvasWidth, canvasHeight); 

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