Anna Sedlar

Creating a HTML5 Erasing Tool

Anna Sedlar | Jul 16, 2018

As a native HTML5 element, canvas is a powerful tool to create engaging, unique web pages. Using just HTML, CSS, and Javascript, we explore a lesser-known property in this screencast called globalCompositeOperation, which allows us to composite new content atop existing content on a Canvas element among many other interesting effects. In this screencast we'll use this property to create a layer-sensitive eraser tool in a drawing app.

For the More Curious...

BNR Guide to Front-End Web Development
Full Stack Courses

Subscribers Only

Transcripts are for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Subscribers Only

Project files are only available for subscribers. Create an account today to access our collection of screencasts, skill packs, and more.

Need Help?

If you get stuck, try starting a discussion with Big Nerd Ranch experts in the community tab.

Related Screencasts

Explore other screencasts related to this topic.

Creating a Chrome Browser Extension

6 minutes

Chrome Browser Extensions are a quick and easy ways to enhance and extend browser functionality using everyday web languages. This screencast walks through the basics of loading a custom or hand-made extension onto the browser. We'll also create our own distraction-preventing extension that reroutes us back to The Frontier whenever we try to visit Twitter.

Load Screens in React

5 minutes

Load screens provide a visual indicator to users that data is being fetched and a useful reminder that the app isn’t frozen. They also can prevent unwanted user interaction with your site. This screencast walks through building a simple load screen in React that will improve user experiences

Throttling Ajax Requests

5 minutes

We can control the frequency with which certain functions can be invoked using a higher-order function to throttle functions just like a car’s throttle controls how much gas is delivered to the engine. This screencast describes a challenge we faced in deciding when to make an Ajax request and how throttling solved the problem.

HTML5 Drag and Drop

8 minutes

Improve user experiences on your web site by adding drag and drop functionality without any external libraries or frameworks. The Drag and Drop API is part of the core HTML5 spec and allows developers to make their sites more interactive and natural. In this screencast, we'll help you build an HTML5 Drag and Drop tool.

Extracting a React Component

8 minutes

Sometimes we don’t realize we should make a custom child component until it’s too late. In this screencast, we'll teach you how to extract a React component from an app.

Minimizing Bundle Size in React

5 minutes

In this screencast, we’ll be looking at how to speed up your React app by shrinking JavaScript bundle sizes. By the end of this screencast you’ll be able to configure Webpack to minimize how much data your users need to download.