JSFiddle - React, Tailwind, and code Playground

HTML

<h3 align="center">CanvasRenderingContext2D.drawImage with image filters</h3>
<hr/>
<table align="center">
    <th>Image</th><th/><th>Canvas</th>
    <tr>
        <td><img id="myimage"/></td>
        <td align="center" style="font-size: 4em">➜</td>
        <td><canvas width="250px" height="200px" id="mycanvas1"/></td>
    </tr>
    <tr>
        <td><img class="grayscale" id="myimage-grayscale"/></td>
        <td align="center" style="font-size: 4em">➜</td>
        <td><canvas width=250px height=200px id="mycanvas2"/></td>
    </tr>
</table>

CSS

img.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

JavaScript

var data =...