Canvas sprites test

by Gregg Tavares

HTML

<div id="outer">
    <div id="radar">
        <div id="radar-content"></div>
    </div>
    <div id="workspace"></div>
    <div id="zoom">
        <div id="zoom-content"></div>
    </div>
</div>

CSS

#outer {
    width: 768px;
    height: 512px;
    position: relative;
}
#radar { 
    z-index: 2;
    border: 1px solid red; 
    width: 200px;
    height: 150px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: white;
}
#radar-content {
    width: 100%;
    height: 100%;
    background: -webkit-canvas(animation) no-repeat;
    background-size: 100% 100%;    
}

#workspace {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 1px solid black;
    background: -webkit-canvas(animation) no-repeat 100% 100%;    
}

#zoom {
    z-index: 3;
    width: 200px;
    height: 150px;
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid blue;
    background-color: white;
}
#zoom-content {
    width: 100%;
    height: 100%;
    background: -webkit-canvas(animation) no-repeat;
    background-size: 10000% 10000%;    
}

canvas { 
    display: none; 
}

JavaScript

// This sample shows a single canvas being displayed 3 times using bleeding edge CSS
// The top left view is a zoomed view
// The top right view is the entire canvas scaled (radar view)
// The background canvas is a 1x1 pixel view.
//
// hover the mouse over the background canvas and the zoomed view will show that
// part of the canvas.
//
// PS: Make the right area of JSFiddle wider to see the top right view.


var main = function() {
    var canvasWidth = 2000;
    var canvasHeight = 1500;
    var workspaceWidth = 768;
    var workspaceHeight = 512;
    
    // Really?
    var ctx = document.getCSSCanvasContext(
        '2d', 'animation', canvasWidth, canvasHeight)
    var zoomContent = document.getElementById("zoom-content");

    var count = 0;
    var render = function() {
      
      var lingrad = ctx.createLinearGradient(0,0,0,canvasHeight);
      lingrad.addColorStop(0, 'red');
      lingrad.addColorStop(0.25, 'yellow');
      lingrad.addColorStop(0.5, 'green');
      lingrad.addColorStop(0.75, 'blue');
      lingrad.addColorStop(1, 'purple');
       
      ctx.fillStyle = lingrad;
      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        
      ctx.scale(13, 13);
      for (var i = 0; i < 6; ++i){
        for (var j = 0; j < 6; ++j){
          ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + 
                           Math.floor(255-42.5*j) + ')';
            for (var k = 0; k < 3; ++k) {
              ctx.beginPath();
              ctx.arc(12.5+j*25,12.5+i*25,10 - k * 3,0,Math.PI*2,true);
              ctx.stroke();
            }
        }
      }
    }
    render();
    
    var trackMouse = function(event) {
       zoomContent.style.backgroundPosition = 
           event.offsetX / workspaceWidth * 100 + "% " +
           event.offsetY / workspaceHeight * 100 + "%";
    }; 
    workspace.addEventListener('mousemove', trackMouse);
        
    
}    
main();