Programming Basics: A website for teaching people how to program
Do your programming with [jsbin] or [Orion]

Computer Graphics with HTML5 Canvas and JavaScript: Getting Images from the Internet

I hope you've had some fun creating pictures using the images I've given you. But using only these pictures can be limiting. What's cool though, is that you can just use any image from the Internet in your pictures. All you have to do is to first find a picture that you like. You can use something like Google Images or Bing Images to search on the Internet for a picture you want. Then, you right click on the picture. If you have a Macintosh, you can't right-click, so you need to hold down the control button and click on the picture instead. And then you'll get a menu with different options. In most web browsers, there will be an option called “copy image URL,” “copy image location,” or “copy image address.” Choose that, and then go back to your program. In the place where you say which image you want to use, just right-click or ctrl-click, and then choose the paste option to put the Internet address of the image you found there. With Internet Explorer, it's a little more complicated. When you right-click on the image, you then have to choose the “properties” menu option. Internet Explorer will then show you a window with the address written on it. You can then highlight the address, right-click it, and then copy that. And that's it.

So go ahead and try grabbing some images from the Internet and putting them together to make your own pictures. Or if you can't find any pictures that you like, you can even upload your own photos and pictures to the Internet using websites like DropBox or SkyDrive or Google Drive.

Do your programming with [jsbin] or [Orion]

Programming Basics

E-mail | About | Privacy Policy