Canvas create an image mask that is transparent
<p>I have a canvas where the user can draw with a brush tool I created (on mousedown or touch).
I would like the drawing area to be restricted by a shape on the canvas, for example, the shape of a Chinese character.</p>

<p>The shape is not a simple shape, so using CanvasRenderingContext2D.clip() is not really an option? </p>

<p>My next solution is to draw the masking image as a PNG with drawImage onto the canvas, then change the CanvasRenderingContext2D.globalCompositeOperation to 'source-atop', so that the brush is drawn within the masking image only.</p>

<p>Here is the requirement which I am stuck at - In the final output of the canvas, I do not want to see the masking image.</p>

<p>I could accept setting the masking image to a very very low alpha such that is is virtually invisible.</p>

<p>Therefore, I tried to set the global alpha before placing the image, then restoring it when the brush starts to draw. </p>

<p>However, the overlap drawn also has the same alpha as the masking image, but I would like it to be at full.</p>

<p>Is there another way to achieve this I am not aware of?</p>