const image = new Image(60, 45); // Using optional size for image
image.onload = drawImageActualSize; // Draw when image has loaded

// Load an image of intrinsic size 300x227 in CSS pixels
image.src = 'rhino.jpg';

function drawImageActualSize() {

  // To use the custom size we'll have to specify the scale parameters
  // using the element's width and height properties - lets draw one
  // on top 
in the corner:
ctx.filter = "grayscale(100%)";
  ctx.drawImage(0, 0, 300,300);}