Painting on an HTML5 Canvas

The title explains it all. Let's create a paint canvas with a color palette and line thickness options!

This exercise is designed as an on-site interview question, which means you don’t have hours to complete it. Therefore, we will not use heavy templates, Babel, or any tooling.

Exercise:

Create a webpage, where you can paint on a canvas. The user should be able to select the color and the thickness (pixel) of the drawn line. You may use any HTML5 elements.

Solution:

Different browsers render the same elements differently. To combat this problem, the demonstration of using CSS resets or normalizers is beneficial. Resets remove all element styles, while normalizers make the default styles consistent for as many browsers as possible. I chose to use normalize.css. You can get it using

Level up your interview prep. Join Educative to access 70+ hands-on prep courses.