From the course: Creating Web Media

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Combine images with Canvas

Combine images with Canvas - CSS Tutorial

From the course: Creating Web Media

Start my 1-month free trial Buy for my team

Combine images with Canvas

“

- [Chris] Hi, this is Chris Converse, and in this episode, we'll be loading and combining separate images into a single canvas element. Now, this technique, if you combine it with some transparent PNG images, can provide a great deal of flexibility and customization options for images on your page. And when you combine this with CSS, our newly-composited images can be dynamically scaled to fit within a responsive design. So if you'd like to follow along with me, download the exercise files, and let's start by opening the index.html file in a text editor. Now, when you have the HTML file open, you'll see we have a very simple layout here. If I scroll down, inside of the article area, we have a figure element. Inside of the figure is our canvas that we're going to be working with. And if you open this up in a browser, you'll see the canvas element showing up here, inside of the content. Now, by default, a canvas element is 300 pixels wide by 150 pixels tall, and we can change this by…

Contents