Ask coding questions

← Back to all posts
HTML5 & Javascript canvas question.
EdwardBentler (40)

Hello, I'm having an issue with the HTML5 canvas, my problem is with the fact that I'm trying to work out textures in a pixel art style, but I need them to be the same size as the player, so I scaled them down. Unfortunately, that wasn't the end of my issues, which has brought me here, once I scale the textures down they become blurred, and that's not a good thing in terms of pixel art, does someone have any solution for the blurring apart from using image hosting?

If you try running the Repl you'll have to go through the opening cutscene, I added a function to skip it, all you have to do is paste this into the console (not the in game console, the real console):


Answered by notGilbert (121) [earned 5 cycles]
View Answer
notGilbert (121)

The image is drawn blurry because of anti-aliasing,

// context is the canvas renderering context (called cvas i think)
context.imageSmoothingEnabled = false;

content.drawImage(/* ... */)

to turn it off