é o seguinte, eu quero usar o canvas como o fundo e desenhar as imagens por cima dele, porém quanto maior eu dimensiono o canvas pior a imagem do canvas fica, e tipo, eu não entendo muito bem como que o canvas deixa a imagem tão ruim, venho fazendo testes com um sprite e tem ficado cada vez pior, isso esse problema é devido eu usar sprites? ou até com uma imagem unica ele tem problemas?
Dê um exemplo do seu problema (um print, por exemplo).
Pode ser um motivo. Se você tem, por exemplo, uma imagem png/jpg/… de 32 por 32 pixels e o redimensiona (estica) pra ficar com 64 por 64 pixels, todos os pixels são basicamente duplicados, o que a deixa mais “pixelizada”, e geralmente não é uma boa ideia.
A coisa fica ainda pior se você não fizer um redimensionamento usando múltiplos de 2, pois a imagem pode ficar mais distorcida ainda. Pegue por exemplo uma imagem de 32x32 e redimensione para 60x60. Ela parecerá mais distorcida que uma imagem de 64x64, pois não é possível duplicar todos os pixels.
Ps: um sprite e/ou um spritesheet é uma imagem, e sofre os mesmos problemas de uma imagem.
Abraço.
por exemplo, eu tava usando uma imagem 256x256 e o canvas eu tava dimensionando em 256x256, só ai ela ja ficava muito ruim, ficava meio borrada sabe, a qualidade cai um pouco, ai se eu aumentasse as dimensoes do canvas só, ele esticava a minha imagem, e se eu diminuir o tamanho dela a imagem piora mais testei com a imagem recortada, e deu no mesmo resultado
Como a imagem é
Como o canvas deixa a imagem
Consegui resolver pelo visto, eu fiz o seguinte que foi a unica forma de trazer a qualidade normal da imagem:
var stylew = window.getComputedStyle(canvas).width;
var valor = parseInt(stylew.substr(0,stylew.search("px")));
canvas.width = valor;
fiz isso para a largura (width) e para a altura(height) e funcionou, parece que o canvas ele tem uma dimensão default de 300x150, pra quando não definirem o tamanho do canvas, ele usa esse valor, o ruim é que quando vc dimensiona o canvas pelo CSS ele apenas puxa os pixels de forma bem ruim, que acaba perdendo a qualidade da imagem, é como se ele trabalhasse com 2 dimensões ao mesmo tempo, uma que é do CSS e outra que é a dele padrão que não muda no CSS, só dessa forma que eu conseguir.
Obg a todos que tentaram me ajudar e para aqueles que tem tido este problema tbm, ai está a solução.
1 curtida