Crop image

by laustdeleuran

HTML

<canvas id="canvas" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>

CSS

body {
    background: silver;
}
canvas {
    display: block;
    margin: 0 auto;
    border: 5px solid white;
}

JavaScript

var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
	
var photo = new Image();
photo.addEventListener('load', eventPhotoLoaded , false);

photo.src = "http://lorempixel.com/1000/500/sports/";

var windowWidth = 500;
var windowHeight = 500;

var windowX = 0;
var windowY = 0;
var currentScale = 1;
var minScale = .2;
var maxScale = 3;
var scaleIncrement = .1;

function eventPhotoLoaded() {
   startUp();
}

function drawScreen(){

   //draw a background so we can see the Canvas edges
   context.fillStyle = "#ffffff";
   context.fillRect(0,0,500,500);

   context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
     0,0,windowWidth*currentScale,windowHeight*currentScale);

}

function startUp(){

   setInterval(drawScreen, 100 );
}

document.onkeydown = function(e){

   e = e?e:window.event;
   console.log(e.keyCode + "down");

   switch (e.keyCode){
      case 38:
            //up
            windowY-=10;
            if (windowY<0){
               windowY = 0;
            }
            break;
      case 40:
            //down
            windowY+=10;
            if (windowY>photo.height - windowHeight){
               windowY = photo.height - windowHeight;
            }
            break;
      case 37:
            //left
            windowX-=10;
            if (windowX<0){
               windowX = 0;
            }
            break;
      case 39:
            //right
            windowX+=10;
            if (windowX>photo.width - windowWidth){
               windowX = photo.width - windowWidth;
            }
            break;
      case 109:
            //-
            currentScale-=scaleIncrement;
            if (currentScale<minScale){
               currentScale = minScale;
            }
            break;
      case 107:
            //+
            currentScale+=scaleIncrement;
            if (currentScale>maxScale){
               currentScale = maxScale;
         }
   }

}