loading-image-canvas-pt.js

// fazendo uma query do elemento presente no arquivo html
const canvas = document.querySelector('#canvas')

// obtendo o contexto de canvas
const context = canvas.getContext('2d')

// Vamos criar uma instância de Imagem
const baseImage = new Image()

// 'lena.jpg' é o caminho da imagem no nosso sistema de arquivos
baseImage.src = 'lena.jpg'

// callback que será chamado quando a imagem for carregada
baseImage.onload = () => {
  // atribuindo a largura e altura da imagem
  const { width, height } = context.canvas
  
  // desenhando a imagem no canvas
  context.drawImage(baseImage, 0, 0, width, height)

  // o método getImageData retorna a informação da imagem
  const imageData = context.getImageData(0, 0, width, height)
}