loading-image-canvas2.js

// doing a query to get the element on html file
const canvas = document.querySelector('#canvas')

// getting the canvas context
const context = canvas.getContext('2d')

// Let's create an Image instance
const baseImage = new Image()

// 'low.jpg' is the image path on your file system
baseImage.src = 'low.jpg'

// callback that will be called when the image is loaded
baseImage.onload = () => {
  // getting the width and height from canvas
  const { width, height } = context.canvas
  
  // drawing the image on the canvas
  context.drawImage(baseImage, 0, 0, width, height)

  // this method will return the data from the drawed image
  const imageData = context.getImageData(0, 0, width, height)
}