Do you need to explain something on a webpage visually? If your work involves clarifying information on web pages, making a visual illustration will be an excellent way to ensure your audiences get better understanding. Like you do on a notes, you should be able to underscore important sentences, draw lines to illustrate related information and also make marks where necessary. When making a video presentation or sharing your screen in conference calls, this capacity to draw on screen is almost inevitable.

The free Screen Draw extension from Mozilla is an excellent alternative to most paid screen drawing tools. It offers most of the basic features you will require in your daily tasks. After installing, Mozilla Screen Draw will add a pencil icon to your Firefox add-on bar. You have to click the pencil icon to launch the extension tools, which include clear, save, text, erase and brush. You can select a color and tweak your default font size or brush size. You can save your screen as PNG or JPG file.

Getting Started with Mozilla Screen Draw

Following are the basic steps involved in setting up and using Mozilla Screen Draw to draw, write or illustrate on Firefox pages.

Downloading and Installing Mozilla Screen Draw

First, you have visit the Screen Draw Extension page. Click the yellow button labeled “Add to Firefox“. The add-on will download briefly, in less than 5 seconds depending on your Internet connection speed.


2. To install, click “Install Now” in the box that opens.


Next, you will be prompted to restart Firefox to complete installation. Click “Restart Now” to restart your Firefox browser in order to activate the Mozilla Screen Draw. Note that, after restarting Firefox will restore all the pages you are currently viewing.


If you are not ready to continue installation, you can select “Not Now” from the arrow button in front of “Restart Now”.

Launching and Using Mozilla Screen Draw

When your Firefox restarts, you will find the Screen Draw icon on your add-on bar, at the lower right hand corner of your Firefox page.


Click on the icon to reveal Screen Draw tools. Like I said earlier, you can select clear, save (as JPG or PNG), text, erase and brush. The brush size can be reduced or increased with the values provided. You can also change the color of your brush to suit your need. Similarly, the text size can be increased or decreased and the text color can be changed.

First, click on the icon to reveal Screen Draw Tools


Then select the tool you want to use – text or brush. You can use Text to make notes, whereas Brush can be used to draw, underline, pinpoint and so on.

Using “Text” Tool on Mozilla Screen Draw

To use the Text tool, click the Text icon. Then, change the color (black in this example) and font size (90 in this example).


You will see a preview of your font size if you use the scroll button to adjust the font size.

Next, move your mouse cursor where you want to input the text. Click and start typing. It is a simple as that.


To “undo” everything you wrote, simply click the icon labeled Clear. To erase a part of what you have written, click Erase, select the size of your eraser and begin to erase.








Similarly, simply select Save from the tools provided to save the page as JPG or PNG file. You can choose to save the full page or just the area you entered texts.

To exit Screen Draw mode, click the Screen Draw icon on your add-on bar again.

Using “Brush” Tool on Mozilla Screen Draw

To use the brush tool, first click the Brush icon in your Screen Draw tool bar. Then select your desired brush color (green in this example) and size (10 in this example).


If you use the scroll button, you will see a preview of your brush size.

Next, move your cursor wherever you want to make your illustration and draw.


Like we said under the Text tool, you can “undo” by clicking Clear or erase a part of the drawing with Erase tool and also Save as JPG or PNG.


So, Mozilla Screen Draw add-on is really valuable and very useful for most basic needs for drawing or writing on Firefox web pages. As humans become more web-dependent and many more activities get carried out on the web, Mozilla Screen Draw and similar tools are bound to become day-to-day web surfing tools.

Get Started with Mozilla Screen Draw Extension

See Also: