Material Design style Canvas

Show and Tell
1

I was in need of canvas drawings that had the look and feel of Material Design objects. While trying to accomplish this I found that:

  1. Handling drawings on various canvas sizes is tedious and prone to math errors
  2. Creating Material Design like drop shadows is non-trivial
  3. Having a coordinate system that starts at the top is just obnoxious to me
  4. Elements on the canvas too close to an edge will have their shadows clipped which looks terrible.

I thought I would share the results of trying to solve these issues.

RatioCanvas

ratio_canvas
RatioCanvas provides a drawing area with a buffer around the perimeter and a fractional coordinate system starting from the bottom left of the drawing area. For me this made drawing on the canvas simple and I no longer have to consider what the canvas size is before hand. The drawing area is within the blue box in this case.

There is a caveat here. Note the grey boxes in the corners of the drawable area, these are “Squares” that have a size of 10% in each axis. So, since our canvas is a rectangle, so are our “squares”. I haven’t pondered methods to handle this since my use case the usefulness of the resulting image is not impacted by changing its aspect ratio.

MaterialCanvas

MaterialCanvas provides a way to create distinct elements on the canvas with an elevation property. After the canvas is finished, you can then finalize the canvas which automatically processes the elements in accordance with their elevation. This will order the elements appropriately so they overlap and cast ambient, umbra and penumbra shadows on the elements below as well as the canvas surface.

I’m pretty excited about the results. The clarity that it brings even when all of the elements are the same color as the background really shows how powerful shadows can be. Here, the only thing that I’m changing is just the elevation of the elements.
material_canvas

App

My intention is to use this as a dependency in my other applications, but I have not tried that yet. The demo here has two examples to show the usage of RatioCanvas and MaterialCanvas

Live Demo

Material Canvas Demo

Clone

MaterialCanvas

6 Likes