Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
// 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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment