Pasar una imagen a escala de grises

[jagp1119]

Hola quiero pasar a escala de grises una imagen cargada en html y pues si pongo esto funciona

Código HTML:

<div id="eventos">
                
                <a href="#seg_pag" ><img src="img/evento.jpg" style=" position:absolute; width: 100%; height: 100%;" id="matrix" onclick=" clicenimagen=1, guardar(), imagen_evento(), ir_a('pagina2')"></a>
            
            </div>
 

Código CSS:

#eventos{
    
    position:absolute;
    top:8%;
    left:10%;
    width: 70%;
    height: 80%;
    border: 1px solid white;
   -webkit-filter: grayscale(100%); 
   
}
 

pero lo que quiero es cambiarlo con javascript pero al poner esto

Código Javascript:

if (objeto == 3){document.getElementById('eventos').style.filter='grayscale(100%)';}
 

no me lo reconoce porque segun veo tiene que tener compatibilidad con webkit si nó no funciona, que puedo hacer?, se que con canvas se puede cambiar la propiedad de color de las imágenes, pero quisiera saber si hay otra forma mas sencilla.