0

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">  
7
  • hace falta un ejemplo mas concreto.
    – John
    Commented el 22 jun. 2022 a las 14:30
  • No se a que te refieres con un ejemplo más concreto. Simplemente no puedo seleccionar la imagen para aplicarle las propiedades y no sé muy bien por qué
    – Sanwych
    Commented el 22 jun. 2022 a las 14:33
  • Lo que puede estar sucediendo son varias cosas, 1) que la clase no se este aplicando a la imagen o 2) que primero carga el css y luego el sistema agrega la imagen y no aplique las reglas css, no recuerdo si este ultimo afecta que primero carge el css y luego los elementos, pero es una posibilidad Commented el 22 jun. 2022 a las 14:39
  • Tiene que ser que primero carga el css y después javascript , ya que al hacer console.log(image) sale con la clase. Aún así sigo sin saber como solucionarlo...
    – Sanwych
    Commented el 22 jun. 2022 a las 14:45
  • 1
    Puedes crear un ejemplo mínimo verificable en la propia pregunta insertando un snippet con el botón que indica <>
    – John
    Commented el 22 jun. 2022 a las 15:10

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.