CS 4600 - Fall 2021 - Introduction to Computer Graphics

Project 1 - Compositing Images

In this project we will implement an alpha compositing function for raster images using JavaScript.

You are given an HTML file that implements a simple web-based image compositing application. The video below describes its interface.

The missing part of this application (the part you will implement) is the JavaScript function that composites a foreground image onto a background image using alpha blending. Here how that function looks like:

function composite( bgImg, fgImg, fgOpac, fgPos )

This function takes 4 input parameters:

This function does not return anything. It just modifies the given background image. The foreground image may have a different size and its position can be negative. The parts of the foreground image that fall outside of the background image should be ignored.

You are given the following files to help you with this project:

Complete the composite function in the project1.js file, such that it composites the given foreground image onto the given background image with the given opacity and position arguments for the foreground image. Then, submit the completed project1.js file on canvas. Please do not rename project1.js in your submission.

Useful tip: Pressing the F4 key reloads the project1.js file without reloading the page, so you can quickly test your implementation.