Tengo una imagen generada desde javascript a la que le he dado su respectiva src El problema es que he tenido que modificar su tamaño y para que se vea como quiero tengo que aplicarle un image-rendering: pixelated, pero no encuentro manera de seleccionar la imagen para darle la propiedad, ni en css ni desde el mismo javascript.
He probado a darle una clase a la imagen y seleccionarla desde css pero tampoco me ha funcionado
const image = new Image()
image.src = './img/mapaeste.png'
image.classList.add("mapa")
context.fillStyle = 'blue'
context.fillRect(0,0,canvas.width, canvas.height )
image.onload = () => {
context.drawImage(image, -130 , -130)
}
.mapa{
image-rendering: pixelated;
}
<canvas></canvas>
<script src = "index.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">