javascript canvas grayscale

1const img = document.querySelector('img');
2const canvas = document.querySelector('canvas');
3const ctx = canvas.getContext('2d');
4
5img.onload = function() {
6  canvas.width = img.width;
7  canvas.height = img.height;
8  ctx.filter = 'grayscale(1)';
9  ctx.drawImage(img, 0, 0, img.width, img.height);
10}