Skip to main content
se añadieron 146 caracteres en el cuerpo
Origen Enlace
Sanwych
  • 185
  • 1
  • 12

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">  

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;
}

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">  
Origen Enlace
Sanwych
  • 185
  • 1
  • 12

Modificar propiedades de una imagen generada por Javascript

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;
}