HTML5 Game - Rubber band with a floating DIV

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Drawing Using Paths

Description

Rubber band with a floating DIV

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head>
     <title>Rubberbands with layered elements</title>
      <style> 
         body {//  w ww  . j  a va  2s  .  c o  m
            background: rgba(100, 145, 250, 0.3);
         }

         #canvas {
            border: thin solid #aaaaaa;
            padding: 0;
         }
         #rubberbandDiv {
            position: absolute;
            border: 3px solid yellow;
            display: none;
         }

      </style>
   </head>

  <body>
      <div id='controls'>
         <input type='button' id='resetButton' value='Reset'/>
      </div>
      <div id='rubberbandDiv'></div>
      <canvas id='canvas' width='800' height='520'>
         Canvas not supported
      </canvas>
     <script>
let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    rubberbandDiv = document.getElementById('rubberbandDiv'),
    resetButton = document.getElementById('resetButton'),
    image = new Image(),
    mousedown = {},
    rubberbandRectangle = {},
    dragging = false;

function rubberbandStart(x, y) {
  mousedown.x = x;
  mousedown.y = y;

  rubberbandRectangle.left = mousedown.x;
  rubberbandRectangle.top = mousedown.y;

   moveRubberbandDiv();
   showRubberbandDiv();

  dragging = true;
}

function rubberbandStretch(x, y) {
   rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
   rubberbandRectangle.top  = y < mousedown.y ? y : mousedown.y;

   rubberbandRectangle.width  = Math.abs(x - mousedown.x),
   rubberbandRectangle.height = Math.abs(y - mousedown.y);

   moveRubberbandDiv();
   resizeRubberbandDiv();
};

function rubberbandEnd() {
   let bbox = canvas.getBoundingClientRect();

   try {
      context.drawImage(canvas,
                        rubberbandRectangle.left - bbox.left,
                        rubberbandRectangle.top - bbox.top,
                        rubberbandRectangle.width,
                        rubberbandRectangle.height,
                        0, 0, canvas.width, canvas.height);
   }
   catch (e) {
      // suppress error message when mouse is released
      // outside the canvas
   }

   resetRubberbandRectangle();

   rubberbandDiv.style.width = 0;
   rubberbandDiv.style.height = 0;

   hideRubberbandDiv();

   dragging = false;
}

function moveRubberbandDiv() {
   rubberbandDiv.style.top  = rubberbandRectangle.top  + 'px';
   rubberbandDiv.style.left = rubberbandRectangle.left + 'px';
}

function resizeRubberbandDiv() {
   rubberbandDiv.style.width  = rubberbandRectangle.width  + 'px';
   rubberbandDiv.style.height = rubberbandRectangle.height + 'px';
}

function showRubberbandDiv() {
   rubberbandDiv.style.display = 'inline';
}

function hideRubberbandDiv() {
   rubberbandDiv.style.display = 'none';
}

function resetRubberbandRectangle() {
   rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 };
}

canvas.onmousedown = function (e) { 
   let x = e.x || e.clientX,
       y = e.y || e.clientY;

  e.preventDefault();
   rubberbandStart(x, y);
};

window.onmousemove = function (e) { 
   let x = e.x || e.clientX,
       y = e.y || e.clientY;

  e.preventDefault();
  if (dragging) {
      rubberbandStretch(x, y);
    }
}

window.onmouseup = function (e) {
  e.preventDefault();
   rubberbandEnd();
}
image.onload = function () { 
  context.drawImage(image, 0, 0, canvas.width, canvas.height); 
};

resetButton.onclick = function(e) {
   context.clearRect(0, 0, context.canvas.width,
                            context.canvas.height);
   context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
image.src = 'http://java2s.com/style/download.png';
       
     </script>
  </body>
</html>

Related Topic