Ramkumar Krishnan: Online Interactive Whiteboard using ASP.NET

Screenshots of White board

Interactive White board is an online collaboration application that’s centered around the whiteboard. With a new type of drawing interface that's actually easy and fun to use, Interactive White board gets out of your way and just lets you draw. Finally the whiteboard enters the digital age!

Who uses Interactive White board?

Interactive white board is used by anyone that uses a real whiteboard, in business and education. Our users include designers, developers, consultants, salespeople, teachers, students, etc.

Step 1: Add the below code in between Head section of your ASPX Page

Complete code:

coming soon...!

<br /><body  onload="doOnLoad()">
<br />
<br /><form  id="form1" runat="server">     
<br />
<br />    
<br /><div class="ctr_btn" id="btn_0" onclick="setCPDrawAction(0);" onMouseDown="setControlLook(0, '#CCCCCC');brushcursor();" onMouseOver="setControlLook(0, '#EEEEEE')" onMouseOut="setControlLook(0, '#FFFFFF')" style="position:relative;background: #CCCCCC ;height: 24px;">Brush</div> 
<br /><div class="ctr_btn" id="btn_1" onclick="setCPDrawAction(1);" onMouseDown="setControlLook(1, '#CCCCCC');erasecursor();" onMouseOver="setControlLook(1, '#EEEEEE')" onMouseOut="setControlLook(1, '#FFFFFF')" style="position:relative; height: 24px;">Eraser</div> 
<br /><div class="ctr_btn" id="btn_2" onclick="setCPDrawAction(2);" onMouseDown="setControlLook(2, '#CCCCCC');lineshape();" onMouseOver="setControlLook(2, '#EEEEEE')" onMouseOut="setControlLook(2, '#FFFFFF')" style="position:relative; height: 24px;">Line</div> 
<br /><div class="ctr_btn" id="btn_3" onclick="setCPDrawAction(3);" onMouseDown="setControlLook(3, '#CCCCCC');rectshape();" onMouseOver="setControlLook(3, '#EEEEEE')" onMouseOut="setControlLook(3, '#FFFFFF')" style="position:relative;height: 24px;">Rectangle</div> 
<br /><div class="ctr_btn" id="btn_4" onclick="setCPDrawAction(4);" onMouseDown="setControlLook(4, '#CCCCCC');roundshape()" onMouseOver="setControlLook(4, '#EEEEEE')" onMouseOut="setControlLook(4, '#FFFFFF')" style="position:relative; height: 24px;">Circle</div> 
<br /><div class="ctr_btn" id="btn_5" onclick="setCPDrawAction(5);" onMouseDown="setControlLook(5, '#CCCCCC')" onMouseOver="setControlLook(5, '#EEEEEE')" onMouseOut="setControlLook(5, '#FFFFFF')" style="position:relative; height: 24px;">Clear</div> 
<br /><div class="ctr_btn" id="btn_9jj" onclick="canvasAnimator.newAnimation();" onMouseDown="setControlLook(9, '#CCCCCC')" onMouseOver="setControlLook(9, '#EEEEEE')" onMouseOut="setControlLook(9, '#FFFFFF')"style="position:relative;  height: 24px;">New</div> 
<br /><div class="ctr_btn" id="btn_6" onclick="setCPDrawAction(6);" onMouseDown="setControlLook(6, '#CCCCCC');rectshape();" onMouseOver="setControlLook(6, '#EEEEEE')" onMouseOut="setControlLook(6, '#FFFFFF')" style="position:relative; height: 24px;">Rectangle</div> 
<br /><div class="ctr_btn" id="btn_7" onclick="setCPDrawAction(7);" onMouseDown="setControlLook(7, '#CCCCCC');roundshape();" onMouseOver="setControlLook(7, '#EEEEEE')" onMouseOut="setControlLook(7, '#FFFFFF')" style="position:relative; height: 24px;">Fillcircle</div>
<br /><div class="ctr_btn" id="btn_8" onclick="setCPDrawAction(8);" onMouseDown="setControlLook(8, '#CCCCCC');yellowcursor();" onMouseOver="setControlLook(8, '#EEEEEE')" onMouseOut="setControlLook(8, '#FFFFFF')" style="position:relative;height: 24px;">Yellow</div> 
<br /><div class="ctr_btn" id="btn_9" onclick="setCPDrawAction(9);" onMouseDown="setControlLook(9, '#CCCCCC');yellowcursor();" onMouseOver="setControlLook(9, '#EEEEEE')" onMouseOut="setControlLook(9, '#FFFFFF')" style="position:relative;height: 24px;">Red</div> 
<br /><div class="ctr_btn" id="btn_10" onclick="setCPDrawAction(10);" onMouseDown="setControlLook(10, '#CCCCCC');yellowcursor();" onMouseOver="setControlLook(10, '#EEEEEE')" onMouseOut="setControlLook(10, '#FFFFFF')" style="position:relative;height: 24px;">Blue</div> 
<br /><asp:Image ID="Image1" runat="server" Height="72px"  ImageUrl="~/images/thumbnail.aspx.jpg" Width="88px" />
<br /><div  id="container"style=" height:610px;width:890px;  position:relative; background-color:DarkSeaGreen; left: 88px; top: -636px;"> 
<br /><div id="drawingSurface" style="height:602px;width:890px; background-color:DarkSeaGreen ; position:relative; left: 0px; top: 0px; " >
<br /><img alt="Scribble" src="ScribbleImage.ashx" style="height:600px;width:0px; "/>
<br /><canvas id="canvas" width="890" height="610"  > </canvas>
<br /><canvas id="canvasInterface" width="890" height="610"></canvas>
<br /></div> 
<br /><div id="chooserWidgets" language="javascript"  visible ="true" runat ="server" style="left: 488px; top: 816px" >
<br /><canvas id="colorChooser" width="0" height="0"  ></canvas>
<br /><canvas id="lineWidthChooser" width="0" height="0" ></canvas>
<br /><canvas id="transportWidget" width="0" height="0"></canvas>		
<br /><script type="text/javascript" src="cp_depends.js"></script>
<br /><script type="text/javascript" src="excanvas.js"></script>
<br /><script src="CanvasWidget.js" type="text/javascript"></script>
<br /><script src="CanvasPainter.js" type="text/javascript"></script>
<br /><script src="CPWidgets.js" type="text/javascript"></script>
<br /><script src="CPAnimator.js" type="text/javascript"></script>
<br /><script src="CPDrawing.js" type="text/javascript"></script>
<br /></div> 
<br /></div>
<br />
<br /></form>
<br />
<br /></body>
<br />
<br />