Test canvas drawing out of viewport

by bakhshi

HTML

<canvas class="output"></canvas>
<button class="draw">Draw</button>
<div class="repl"></div>

CSS

.repl, .output{
    width:300px;
    height:300px;
}

JavaScript

$(main);
var $output, $canvas;

function paintInternal(){
    $canvas = $('<canvas></canvas>');
    var canvas = $canvas[0];
    canvas.width = $(window).width() + 500;
    canvas.height = $(window).height() + 1000;
    var context = canvas.getContext('2d');
    context.setFillColor('blue');
    context.fillRect(0, 0, canvas.width, canvas.height);
    var cols = canvas.width/100,
        rows = canvas.height/100;
    context.setFillColor('white');
    for(var c = 0; c < cols; c++){
        for(var r = 0; r< rows; r++){
            context.fillText(r+','+c, c * 100, r*100);
        }
    }
    
    
}

function paint(){
    paintInternal();
    var output = $output[0],
        canvas = $canvas[0];
    alert(canvas.width +':'+canvas.height);
    output.getContext('2d').drawImage(canvas, canvas.width - 300, canvas.height - 300, 300, 300, 0, 0, 300, 300);
    $canvas = null;
    $('.repl').css('background-image', "url('"+output.toDataURL("image/png")+"')");
}

function main(){
    $output = $('.output');
    $output[0].width = 300;
    $output[0].height = 300;
    
    $('.draw').on('click', paint);
}