Multi canvas layer paint application in HTML5 - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

Multi canvas layer paint application in HTML5

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://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{// w ww .j  ava  2  s . c om
   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 your mousedown stuff here
      lastX=mouseX;
      lastY=mouseY;
      isMouseDown=true;
    }
    function handleMouseUp(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      // Put your mouseup stuff here
      isMouseDown=false;
    }
    function handleMouseOut(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      // Put your mouseOut stuff here
      isMouseDown=false;
    }
    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      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>

Related Tutorials