Use HTML5 Canvas to render the color triangle

[masakudamatsu]

Check if Canvas can improve the appearance of the color triangle than SVG

[masakudamatsu]

First, set up HTML5 Canvas with React

• http://www.petecorey.com/blog/2019/08/19/animating-a-canvas-with-react-hooks/

[masakudamatsu]

Second, render the color triangle.

• http://jsfiddle.net/eGjak/60/

[masakudamatsu]

With 200 x 200 resolution, we have this:

• Why the upper edge of the triangle is curved? It should be linear...
• How to deal with the empty lines?

[masakudamatsu]

We do not need to worry about anti-aliasing. It's on by default: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

[masakudamatsu]

We do not need to worry about the Retina display issues as mentioned in https://www.html5rocks.com/en/tutorials/canvas/hidpi/

• See https://stackoverflow.com/questions/24332639/why-context2d-backingstorepixelratio-deprecated

[masakudamatsu]

The height and width attributes of the canvas element effectively set the resolution of an image. Canvas methods to draw paths and rectangles will refer to the grid created by height and width pixel values.

The actual size of an image can be set with CSS declarations on the canvas element.

Without specifying height and width, it defaults to 300 pixels wide and 150 pixels high. If CSS does not respect the aspect ratio of 2:1, then the image will get distorted.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

[masakudamatsu]

We manage to render a selected color swatch upon clicking the color triangle.

But the shown color code appears to be wrong. Sometimes it's black even if we click the center of the triangle. We need to investigate why.

[masakudamatsu]

The reason for a bug mentioned in the previous comment:

• We create the canvas context within the useEffect hook because the reference to the canvas element will not be created until React renders it.
• This means that the context object cannot be accessed outside the useEffect code block.
• The handleClick function needs the context object to retrieve the color of the clicked pixel.

A solution: Set the context object as a React state and cascade the useEffects hooks, then we can use the context object outside the useEffects code block.

• See https://qiita.com/shikigamix/items/fe862b6f86146aa8dfc0

[masakudamatsu]

Next up: Refactor the code along the line of this snippet: https://stackoverflow.com/a/63212430/11847654

• This way, the Canvas component can be reused for any future projects with canvas elements
• It improves the code readability by separating the code for drawing an image from the code for handling the canvas element in React.