DrawingControl

<div id="mark_damage" 
    data-win-control="HFWinJSCtrl.DrawingControl" 
    data-win-options="{
        label: 'Mark damage with pen',
        width: 226,
        height: 270,
        image: '{{HFFormPath}}/watermeter.png',
        required: true 
    }">
</div>

Property	Type	How to use	Description
width	Integer	width: 226	Needs to be set for this control to define the width of the field. The value is in pixels. The maximum is always 460 px
height	Integer	height: 280	Needs to be set for this control to define the height of the field. The value is defined in pixels.
responsive	Boolean	responsive: true	Set "true" whenever the DrawingControl should be responsive. It overrites given width and height values. The default value is false.
disabled	Boolean	disabled: true	Set "true" whenever the DrawingControl should be disabled. The default value is false.
doNotCopy	Boolean	doNotCopy: true	Set "true" whenever the field should get deleted if form is copied.
image	Path	image: '{{HFFormPath}}/watermeter.png'	Write down the path to connect the field with your picture. The first part of the path represents a placeholder and will be changed at runtime.
label	String	label: 'Mark damage with pen'	Define a label for your control element.
mapping	Boolean	mapping: true	Set "true" whenever the form element should be visible / editable in the corresponding SharePoint list.
required	Boolean	required: true	Set "true" if the control has to be filled in.
tooltip	String	tooltip: 'Please indicate at least one cause of damage.'	Write a comment to provide further information about the field. A question mark will then be shown within the label and with a click/tap on it, the information will occur.
onChanged	Function(filled: boolean)	onChanged: HFFormdefinition.Namespace.Method	Call a pre-defined JS-method to do something when the status of the control changes

Stored data

<div id="mark_damage" 
    data-win-control="HFWinJSCtrl.DrawingControl" 
    data-win-options="{
        width: 226,
        height: 270,
        image: '{{HFFormPath}}/watermeter.png',
        required: true 
    }"></div>

For each DrawingControl inside your forms there are several value pairs of stored data:

The first two value pairs are the default data to be stored – the first pair indicates the DrawingControl has been used …

{
    "id": "mark_damage",
    "value": true
}

… and the second pair stores the information on the created image

{
    "id": "mark_damage_HFDrawingImageMerged",
    "value": "mark_damage_merged.png"
}

Finally, the third pair stores the information of the strokes

{
    "id": "mark_damage_HFDrawingStrokes",
    "value": "fabric.Objects"
}