Introduction
Although HTML5’s formal specification is still under development, the technology is already growing in popularity. HTML5, as supported by many popular web browsers, already brings together a set of client-side technologies for producing highly interactive and responsive applications. One of the more talked-about parts of the HTML5 toolkit is the Canvas element. This new element provides a graphical drawing surface, allowing developers to create graphics and animations, similar to other client-side technologies such as Flash. The canvas element is quite easy to use, providing a quick and powerful starting point for creating a variety of client-side graphical applications.
Add to Wishlist. Paint Brush program a great and simple tool to draw on a tablet or phone. As well as keeping all the images in the gallery of the device, and share them on social networks. Drawing can be for children and adults. And we have added back button in the drawing steps back and forward. There are three sizes of brushes. The colors of a brush only come into play for tools where they are meaningful: the Pencil, Paintbrush, and Airbrush tools. For the other paint tools, only the intensity distribution of a brush is relevant. This option lets you to modify precisely the size of the brush. Toolbar button to export progress to.PNG image file Include free water-lily pattern for all users Option to set selected thread highlight color. Be as creative as you want with inspiring out-of-this-world painting tools like 3D-Shaded Brush, Halo Brush, Plasma Chain Brush, and Translucent Brush. It also has Lighten and Darken tools, a tremendous help when you want to add some depth and life to your drawings. Oct 17, 2020 How to Add Toolbars on the Taskbar in Windows 10 Windows includes a special application desktop toolbar called the taskbar that shows on the bottom of a display screen by default. The taskbar allows you to find, see, open, and switch between your apps.
In this tutorial, we’ll walk through creating a simple paint program in the web browser, with HTML5 and Javascript. We’ll create a toolbar, containing a set of paint colors and image stamps, and allow the user to paint within the canvas element and even save the image.
First, Try the Example
Before getting started with the details behind implementing the HTML5 canvas paint application, let’s take a look at the actual paint app running in the web browser.
Attach Toolbar To Paintbrush Apps
Starting with a Web Page
As with any HTML5 application, you can start out with a simple web page, containing the canvas element. The canvas element is actually an HTML5 tag, located within the body of the web page. Since we’ll be using Javascript to reference the canvas element and toolbar buttons, we’ll also include a link to the jQuery library. The HTML source code for a simple page can appear, as follows:
Notice in the above HTML page, we’ve included a Javascript link to the jQuery library from Google’s CDN (content distribution network), which saves us from having to host the file ourselves. We’ve also included a link to our own Javascript files paint.js, and init.js. We’ll get to those in just a bit.
Notice the above page contains a “canvas” tag element within the page. This will serve as our drawing surface. All paint commands will be issued against the canvas element. We’ve also defined a couple of div objects, to serve as buttons for our toolbar. We simply color the div background and set a border, to simulate the appearance of a button. Once clicked, we’ll change the appearance of the div border, to simulate focus on the button.
With the HTML defined, we can start our initial programmatic hook to gain access to the canvas. This occurs within our init.js file.
Hooking and Initializing HTML5
We now have a web page with an HTML5 canvas element. The next step is to perform our logic upon loading the page. There are a variety of methods for doing this, such as overriding the “onload” event within the body tag. We can also simply include our init.js file and have it automatically add an event listener to the window, as follows:
The above code inserts a window event listener for the “load” event. The load event will then call our init() method after the page has loaded. The init() method is where the core of our HTML5 canvas initialization will occur.
Initializing the Canvas
When working with the HTML5 canvas, you’ll typically need to reference the canvas’s context object, which is where the drawing actually occurs. We can access the context by first obtaining a reference to the canvas element within the page, and then getting a reference to the “2d” context of the canvas. This occurs within the first 2 lines of our init() method, as shown below:
Note in the above code, we’ll also automatically adjust the width and height of the canvas to size to the window. This allows us to maximize the paint screen according to the window size. We also add a set of event listeners. The first listener is to handle the “mousemove” event. This will allow us to paint as the mouse is moved across the screen. We’ll also monitor the “click” event on the canvas, for stamping images on the screen when the mouse is clicked (if a stamp was selected by the user). Finally, we’ll add a set of listeners for each div button, to handle clicking the div and changing the color accordingly.
It’s Alive!
To get the basics of our paint program going, we’ll first handle the “mousemove” event by defining our onMouseMove() method, as follows:
The above code accesses the coordinates of the mouse in order to retrieve an x,y coordinate. We’ll then draw a line from the canvas’s current draw point to the mouse’s coordinate. As the mouse moves across the screen, this method will fire, drawing pixels along the way.
Note, the above code will continuously paint as the mouse moves, regardless if the user releases the mouse button. To only paint while the mouse button is clicked, you can toggle the value of “started” and handle it within the “click” event of the canvas.
Clicking the Canvas
As mentioned above about continuous paint, you can toggle the “started” variable in the click event handler. To keep our example simple, we’ll just include logic for displaying the image stamps upon clicking the canvas. You can certainly update the code to include painting on or off depending on holding down the mouse button as well. We’ll define our click event handler, as follows.
The above code simply checks if we’ve already set a stampId (which is set when the user clicks one of the stamp buttons), and if so, draws the image on the canvas by using the drawImage() method, built into HTML5.
If you notice in the initial HTML for the page, the image stamp div buttons include an IMG image tag. This displays the image on the button. It also allows us to copy the image to draw onto the canvas with the drawImage() method. In the above code sample, the first parameter to the drawImage() method can take a reference to an IMG tag. It will use the contents of the IMG tag to draw onto the canvas surface.
An example of the div tag, containing an image element, appears as follows from our HTML page:
Changing the Colors
Since we’ve also added listeners for handling the click events on the toolbar buttons, we can implement the onColorClick() method as follows:
The above code first closes and re-opens the canvas’s context. This allows us to select a new color for painting on the HTML5 canvas. We choose a new color with the context.strokeStyle attribute. We’ll also set a border around the toolbar div button, to highlight that the color is selected. Note, we also keep a copy of the last color selected, so we can unhighlight the button’s border when a new color is clicked.
Flood Filling the Canvas Background
We can fill the background of the HTML5 canvas with a color in the onFill() method that we’ve added a listener for. The code simply involves calling the context.fillStyle to select a color and then calling context.fillRect() to paint a rectangle with the width and height of the HTML5 canvas block.
Selecting an Image Stamp is Easy
We’ve already defined the actual painting of the image stamps when the user clicks the canvas. We now need to define the method for the button click event from the stamp toolbar button. Upon clicking the toolbar button for an image stamp, we’ll simply save the div id (which is passed to us from the original event listener hook) in the init() method. Later on, when the user clicks the canvas, we’ll paint the element associated with this Id, which happens to be the inner IMG image tag.
Saving a Canvas Image
After painting on the HTML5 canvas, the user can save the image as an actual picture by using the HTML5 toDataURL() method. For our example, we’ll save the image as a PNG and write it to the page. The user can then right-click the image and save it to disk. The code appears, as follows:
Drawing Only When the Mouse is Down
This example has auto-draw enabled, meaning the application will continuously paint while the mouse is moved around the screen. This makes it easy for children to draw by just moving the mouse, without having to click. However, it’s easy to enhance the program to only paint while holding down the mouse button (as in most traditional paint programs) by making the following changes to paint.js:
Conclusion
HTML5 provides an interesting and powerful set of technologies for creating the next generation of client and web-based applications. With the HTML5 canvas element, software developers can create a large variety of graphical applications, including charts, animations, games, and more. Although HTML5 is still under specification, many modern web browsers already include full support, allowing developers to implement fully functioning HTML5 applications to enhance productivity and user interaction.
Attach Toolbar To Paintbrush App Download
See It In Action
Download @ GitHub
The source code for this example is available online in our GitHub repository.
About the Author
This article was written by Kory Becker, software developer and architect, skilled in a range of technologies, including web application development, machine learning, artificial intelligence, and data science.
Comments are closed.