Pattern to reveal overlaid line art based on pattern pixel color - Javascript Canvas

Javascript examples for Canvas:Line

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

Description

Pattern to reveal overlaid line art based on pattern pixel color

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <link rel="stylesheet" type="text/css" media="all" href="reset.css"> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){/*from w  ww  .  j a  v  a  2 s  .  c om*/
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasB=document.getElementById("black");
    var ctxB=canvasB.getContext("2d");
    var canvasC=document.getElementById("color2");
    var ctxC=canvasC.getContext("2d");
    ctxB.fillRect(50,50,50,100);
    ctxC.fillStyle='yellow';
    ctxC.fillRect(75,50,50,50);
    ctxC.fillStyle='red';
    ctxC.fillRect(75,100,50,50);
    var iDataB=ctxB.getImageData(0,0,canvasB.width,canvasB.height);
    var dataB=iDataB.data;
    var iDataC=ctxC.getImageData(0,0,canvasC.width,canvasC.height);
    var dataC=iDataC.data;
    ctx.drawImage(canvasC,0,0);
    var iData=ctx.getImageData(0,0,canvas.width,canvas.height);
    var data=iData.data;
  
    for(var i=0;i<dataC.length;i+=4){
        var isBlack=(dataB[i]==0 && dataB[i+1]==0 && dataB[i+2]==0 && dataB[i+3]==255);
        var isRed=(dataC[i]==255 && dataC[i+1]==0 && dataC[i+2]==0 && dataC[i+3]==255);
        if(isBlack && isRed){
            data[i]=0;
            data[i+1]=0;
            data[i+2]=0;
            data[i+3]=255;
        }
    }
    ctx.putImageData(iData,0,0);
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <canvas id="black" width="200" height="200"></canvas> 
      <canvas id="color2" width="200" height="200"></canvas> 
      <canvas id="canvas" width="200" height="200"></canvas>  
   </body>
</html>

Related Tutorials