Web Code Globe Web Code Globe

Code Generation

Code Generation OptionsCode Generation Options As you draw, WebCode generates the drawing code on-the-fly. There are, however, a few settings that affect the code generation.


Operating System ButtonOperating System Button First and foremost, you have to choose between 3 targets: JavaScript+Canvas, CSS+HTML and SVG. You can specify the target using the target popup button in the lower toolbar.

The target setting only affects the generated code, your drawing stays the same.

Drawing origin

The second most important code setting is the drawing origin. The position of the (0, 0) point may vary, depending on where you move the drawing origin. By default, the drawing origin is positioned in the upper left corner of the canvas.

Retina compatibility

For the JavaScript+Canvas target, you can choose if you want to generate "Retina-ready", resolution-independent code or if you want to "Ignore Retina". Both options work well on Retina and non-Retina displays. However, the "Ignore Retina" option draws a pixellated canvas image on Retina displays. On the other hand, the "Retina-ready" option generates slighty more complicated code.

Extracting shape attributes

In the JavaScript+Canvas code, some shape attributes can be extracted. This only affects the generated code. An extracted attribute is defined as a separate variable just below the library item declarations. This makes it is easy for you to change the attribute manually after you integrate it to your source code. On the other hand, an attribute that is not extracted is usually used as a plain constant somewhere deep in the generated code.

You can extract an attribute by clicking on the extraction button, where available:

Extract OnExtract On

Extract OffExtract Off