html5 - Object definition in the canvas -

i'm making final project in last year of college called "data flow diagram drawing tool" website based. having difficulties on how make warning when diagram in canvas wrong. example, terminator meets data flow meets process correct. when terminator meets data flow , meets storage wrong. how can make warning when mistake occurred? need kind of object definition each shape in canvas. how do that? need :(

here's quick outline of how create , validate data-flow steps:

• create javascript objects hold information related each step in data-flow diagram.

• save step-objects in array easy processing

• iterate through steps array , validate each step.

example code:

// create javascript objects representing data-flow steps // , put steps objects in array easy processing var steps=[]; steps.push({type:'external',label:'customer'}); steps.push({type:'flow',label:'place order',isbidirectional:true}); steps.push({type:'process',label:'process order'}); steps.push({type:'flow',label:'save order',isbidirectional:false}); steps.push({type:'storage',label:'db table: orders'});  // start out assuming steps valid for(var i=1;i<steps;i++){ steps[i].isvalid=true; }  // invalid steps , mark them // example checks sequential steps not separated flows for(var i=1;i<steps;i++){     if(steps[i-1].type!=='flow' && steps[i].type!=='flow){         steps[i].isvalid=false;     } }