Canvas Logo Maker Guide

Automatically create logos in the browser using Canvas from HTML 5.

Compatibility: Firefox 9, Chrome 16, Safari, Edge.

To save your logo

?

In Firefox 10, just right-click on the logo to display a pop-up menu offering to save the image.
In Chrome, this is not possible now, you need to create an image from a canvas and add it to the page to save (or take a picture).

At the bottom of the interface, click Your logo becomes the PNG image that appears on the page below the interface bar. To save this image, right-click it to open the menu, and then select Save.

Resize Logo

This can be done using the sliders above the channel or by directly entering the number of pixels. The first cursor corresponds to the width of the channel, the second - to the height.

Use of colors

Couleurs dans l'éditeur de logo

A swatch allows you to change the text color, background, or border of the text if assigned a color. First, click one of the three input fields on the left:

We then move the mouse around in a circular pattern and then a square pattern in the center to refine the hue. Then click one of the three input fields to update the corresponding color. When one of the 3 fields is surrounded by black, and therefore selected and activated, you can immediately change the color of the element by clicking on the sample .

You can also enter a hexadecimal color code in the input field.
In this case, you must enter either 6 hexadecimal digits or 3 digits, possibly preceding '#', but this is not necessary. In the first case, each pair corresponds to red, green, blue values, respectively. In the second, each digit will be doubled to form a pair and therefore an RGB component of the same color.

Example: 448800 or 480 correspond to the same color.

Text Font and Position

The text is shifted along the channel by pressing the buttons and for the x and y position (horizontal and vertical).

Fonts are offered, available, in particular, in Windows. You can extend it to change the source code.

The size of the text is changed using a slider, such as a canvas, or by directly entering the number of pixels in the input field.

Add Shadow

Select the Shadow check box to display the shadow. It can be more or less separate from the text and more or less common. To do this, enter values in the Offset and Blur fields on the same line.

Add Border

A frame can be set in the text with a certain pixel thickness, which can be offset from the text. By default, the offset values are 0, and the border adjusts around the text.

You can also set the color of this border by clicking the Edge text box next to the color swatch.

Add an image

When you add an image, it's behind the text. However, if the background has a texture, the image will be placed in front of it.

Clicking this button allows you to select an image from a local folder. It can then be used in different ways:

The image is displayed as is and cut if it exceeds the height or width.

The image changes to the size of the channel and serves as a background. She may lose her proportions .

The image is added to the texture pattern and can be used as such.

Use textures

Like colors, textures can be applied to the text or background of a logo. Select the appropriate check box and click the texture.

When Transparent Background is selected next to color swatches, the texture is not explicitly displayed.

This replaces the background color when you select a texture. Conversely, if you select a background color, the texture is removed.

Logo Editor

A list of what remains to be done

Any contribution to Gitub is welcome...

Credits

The program uses the following libraries:

License

Mozilla Public License. Compatible with GPL. Any modified version must remain under MPL.
http://www.mozilla.org/MPL/1.1/