javascript - Multi canvas layer paint application in HTML5 -

-

i building paint tool eraser option using html5 canvas. canvas loads backgroung image , on image users can draw paintings. on using eraser tool painted part should erased(not part of image). know must use more 1 canvas it. please me code example if can. in advance.

yes, can use 2 canvases support both indestructible background , sketching foreground.

btw, background doesn't need canvas. image or div content.

a quick illustration

you can wrap background , sketching canvases in wrapper div:

    <div id="wrapper">         <canvas id="canvas2" width=300 height=200></canvas>         <canvas id="canvas" width=300 height=200></canvas>     </div>

then use css position sketching canvas directly on top of background canvas:

    body{ background-color: ivory; }     #wrapper{         position:relative;         width:300px;         height:200px;     }     #canvas,#canvas2{         position:absolute; top:0px; left:0px;         border:1px solid green;         width:100%;         height:100%;     }     #canvas2{         border:2px solid red;     }

here small illustration app uses background canvas display blue background.

the sketching canvas (on top) used draw , erase.

here's code , fiddle: http://jsfiddle.net/m1erickson/g6jak/

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <!--[if lt ie 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->  <style>     body{ background-color: ivory; }     #wrapper{         position:relative;         width:300px;         height:200px;     }     #canvas,#canvas2{         position:absolute; top:0px; left:0px;         border:1px solid green;         width:100%;         height:100%;     }     #canvas2{         border:2px solid red;     } </style>  <script> $(function(){      var canvas2=document.getelementbyid("canvas2");     var ctx2=canvas2.getcontext("2d");     ctx2.fillstyle="skyblue";     ctx2.linewidth=5;     ctx2.fillrect(0,0,canvas2.width,canvas2.height);      var canvas=document.getelementbyid("canvas");     var ctx=canvas.getcontext("2d");      ctx.linecap = "round";     ctx.linejoin = "round";     ctx.linewidth=3;     var lastx;     var lasty;      var mousex;     var mousey;     var canvasoffset=$("#canvas").offset();     var offsetx=canvasoffset.left;     var offsety=canvasoffset.top;     var ismousedown=false;       function handlemousedown(e){       mousex=parseint(e.clientx-offsetx);       mousey=parseint(e.clienty-offsety);        // put mousedown stuff here       lastx=mousex;       lasty=mousey;       ismousedown=true;     }      function handlemouseup(e){       mousex=parseint(e.clientx-offsetx);       mousey=parseint(e.clienty-offsety);        // put mouseup stuff here       ismousedown=false;     }      function handlemouseout(e){       mousex=parseint(e.clientx-offsetx);       mousey=parseint(e.clienty-offsety);        // put mouseout stuff here       ismousedown=false;     }      function handlemousemove(e){       mousex=parseint(e.clientx-offsetx);       mousey=parseint(e.clienty-offsety);        // put mousemove stuff here       if(ismousedown){           ctx.beginpath();           if(mode=="pen"){               ctx.globalcompositeoperation="source-over";               ctx.moveto(lastx,lasty);               ctx.lineto(mousex,mousey);               ctx.stroke();                }else{               ctx.globalcompositeoperation="destination-out";               ctx.arc(lastx,lasty,5,0,math.pi*2,false);               ctx.fill();           }           lastx=mousex;           lasty=mousey;       }     }      $("#canvas").mousedown(function(e){handlemousedown(e);});     $("#canvas").mousemove(function(e){handlemousemove(e);});     $("#canvas").mouseup(function(e){handlemouseup(e);});     $("#canvas").mouseout(function(e){handlemouseout(e);});      var mode="pen";     $("#pen").click(function(){ mode="pen"; });     $("#eraser").click(function(){ mode="eraser"; });  }); // end $(function(){}); </script>  </head>  <body>     <div id="wrapper">         <canvas id="canvas2" width=300 height=200></canvas>         <canvas id="canvas" width=300 height=200></canvas>     </div>     <button id="pen">pen</button>     <button id="eraser">eraser</button> </body> </html>

Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more