# InputDraw - Example

## How can I put an InputDraw with advance features?

Here is an example of a page with more advance features so it is all easy to understand.

Following is the example code:

<div id="place" style="width:600, height:225"></div><br/><br/> <input type="hidden" id="svgdraw" /><br/><br/> <div id="place2" style="width:450, height:168"></div><br/><br/> <input value="<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 225"><g fill="none" stroke-miterlimit="6" stroke-linecap="round" stroke-linejoin="round"></g></svg>" id="svgdraw2" type="hidden"> <br/><br/> <script type="text/javascript"> var draw = new InputDraw("inputdraw.non-commercial.v1.5.swf", "place", {id:"svgdraw", width:"600", height:"225",stroke_style:"6 1 rgb(255,0,0)", animation:60, background_image:"eyes.jpg" ,tools_color:"0xd6c004", clean:"clear.png", undo:"undo.png", disable:"color"}); var view = new InputDraw("inputdraw.non-commercial.v1.5.swf", "place2", {src_id:"svgdraw2", width:"450", height:"168",stroke_style:"1 1 rgb(255,0,0)", animation:60, background_image:"eyes.jpg"}); draw.OnPath('view.AddPath') </script>

Here we have an example with a drawing pad and a view canvas. Both have "eyes.jpg" as background. As you can see for the drawing pad we defined the stroke style and disable the possibility to change the Stroke Color.We also change the icons and the tools color.

Using the Javascript API we enable the view area so that every stroke the user does on the draw pad will also appear on the View. Notice that we set the initial SVG for the View so that it emulates the size of the Draw and draw everything on the right place.

### Example

Here is the drawing area.

And the smaller View where all stroke will end up.

Enjoy.