The HTML5 canvas element is a great new addition to web development. It allows designers to create amazing graphical work in a more standardised way, with increasing support amongst browsers. Working with an HTML canvas for the first time can be challenging task, therefore my choice to create a simple paint application.
As I was shaping the idea behind the layout in my head, I realized that I clearly needed help to get started. Seeing as I am a great fan of professional guidance, otherwise known as tutorials, I decided to browse the Internet for similar work. I stumbled across an article on "Creating a Paint Application with HTML5 Canvas" written by Rishabh, at codetheory.in, which I used as an early base. Providing me with basic knowledge that I then could derive and modify to a more suitable piece of work, that better match my personal goals.
The final product contains two canvas elements, one for previewing the brush and the other one for painting on. Inspired by Adobe Photoshop basic settings for brushes, I decided to have adjustable options for opacity, hardness and size. Each change to the settings updates both the internal brush properties and the preview in real time, giving the user direct feedback from his or her choices. The basic principle behind the paint canvas was to capture each mouse event and then render a circle with a gradient based on the users' settings. The positional argument for each circle is that of the users' mouse cursor location. That way each movement represents a new brushstroke painted onto the canvas until the user releases the left mouse button. This may not be the best approach for smooth painting, but it does its job to a degree that I am satisfied with.