Canvas test

by samih

HTML

<button id="increaseWidth">Click Me</button>
<div class="timeline">
    <canvas class="tactics-canvas" width="200" height="200">
    </canvas>
</div>

CSS

.timeline {
    width: 100%;
    height: 400px;
    background-color: lightgray;
}

.tactics-canvas {
    width: 100%;
    height: 100%;
}

JavaScript

var timeline = $('.timeline');
var canvas = $('.tactics-canvas')[0];
var context = canvas.getContext('2d');
canvas.width = timeline.width();
canvas.height = timeline.height();
context.fillStyle = "#0000FF";
for (var i=0; i<100000; i++){
    context.fillRect(0.0001*canvas.width*i, i%400*1 + 5, 1, 1);
}

$('#increaseWidth').on('click', function(event){
    timeline.css('width', (timeline.width() + 20) + 'px');
    canvas.width = timeline.width();
    canvas.height = timeline.height();
    context.fillStyle = "#0000FF";
    for (var i=0; i<100000; i++){
        context.fillRect(0.0001*canvas.width*i, i%400*1 + 5, 1, 1);
    }
});