Sign up for a plan to instantly unlock all premium lessons.
Premium Features
Sampling Images
Sampling images with a canvas element requires a bit of know-how around how images are technologically rendered.
If we analyze an image being displayed on a screen, looking very closely (or very zoomed in), you’ll see the image is composed of many little pixels that when used together, form the whole image.
To sample and manipulate an image with canvas, we must loop over every pixel within an image, and store its color data within a canvas object we can interact with. Once you get through this process, you’ll be able to manipulate your image in an unlimited number of ways that just wouldn’t be possible otherwise.
Comments
Want to participate?
Create a free Chris Courses account to begin
Your html code doesn't reference the canvas and there are a bunch of other files in the folder like a readme so I assume there's some framework you built it with? Is there some missing video? The project looks really cool, but I want to be able to follow along, not have to figure things out for myself here.
Thanks! Love your work.
Hey sorry! Bit of an older vid - I can make sure to put the exact code in here for download and viewing, just give me an a few hours and I’ll have it up 🙌
So looking through this vid a bit further, it does indeed look like I used webpack to compile and read my JS automatically. I just inserted some code into the video description which should do away with the need to use any bundler—just recreate those files, run index.html and you should be good to go.
The code at this point animates the Charizard image and all of its pixels to the right of the screen as shown in the end of the video. Let me know if you need any additional code, I'm working on a downloadable version to attach to the video now.
Might require some sort of module bundler to use ES6 import / export features. Sorry about the issues, glad you were able to get it going though, I’ll make note in the description based off your feedback. Thanks!
Hey Chris! I Seem To Be Having An Issue Uploading The Image! I Got This Error At 1:16 In The Video.
Error:
(anonymous) @ (index):14
localhost/:1 Access to image at 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35418/charizard.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.