Canvas putImageData XOR - Javascript Canvas

Javascript examples for Canvas:image

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

Description

Canvas putImageData XOR

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
   </head> 
   <body> 
      <canvas id="myCanvas" width="800" height="600"></canvas> 
      <script>
var m_ctx;/*from ww  w.j a va2s.c  o  m*/
var m_canvas;
var m_bCursorOn = false;
var m_nXpos = 0;
function DrawCursor()
{
   var nCellY = 10;
   var nCellH = 24;
   var nCellX = m_nXpos;
   var nCellW = 13;
   m_bCursorOn = !m_bCursorOn;

   var imgData = m_ctx.getImageData( nCellX, nCellY, nCellW, nCellH );
   var data = imgData.data;
   for(var i = 0; i < data.length; i += 4)
   {
      data[i] ^= 255;
      data[i + 1] ^= 255;
      data[i + 2] ^= 255;
   }
   m_ctx.putImageData( imgData, nCellX, nCellY );
}
function MoveCursor()
{
   if (m_bCursorOn)
      DrawCursor();
   m_nXpos += 13;
   if ( m_nXpos >1000)
      m_nXpos = 0;
   DrawCursor();
}
window.onload = function()
{
   m_canvas = $('#myCanvas')[0];
   m_ctx = m_canvas.getContext("2d");
   m_canvas.width  = window.innerWidth|0;
   m_canvas.height = window.innerHeight;
   m_canvas.style.width  = ((m_canvas.width/13)|0)*13+'px';

   m_ctx.fillStyle = "black";
   m_ctx.fillRect( 0, 0, m_canvas.width, m_canvas.height );
   setInterval( function(){ DrawCursor();}, 301 );  // cursor blink
   setInterval( function(){ MoveCursor();}, 501 );
};

      </script>  
   </body>
</html>

Related Tutorials