resize circle

by Gustavo Carvalho

HTML

<canvas></canvas>
<div id="winsize"></div>

CSS

body {
    margin:0;
    overflow:hidden;
}
#winsize {
    position:absolute;
    left:0;
    top:0;
}

JavaScript

var ctx, canvas, x, y, w, h, r;

function draw() {
    ctx = $('canvas').get(0).getContext('2d');
    canvas = ctx.canvas;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function setVars() {
    w = canvas.width;
    h = canvas.height;
    x = w/2;
    y = h/2;
    r = x < y ? x : y;
}

function circle(x, y, r, c) {
    ctx.beginPath();
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
    rad.addColorStop(0, 'rgba(' + c + ',1)');
    rad.addColorStop(1, 'rgba(' + c + ',0)');
    ctx.fillStyle = rad;
    ctx.arc(x, y, r, 0, Math.PI * 2, false);
    ctx.fill();
}

function makeCircle() {
    draw();
    setVars();
    circle(x, y, r, '255,0,0');
    //circle(128, 128, 200, '255,0,0');
}

makeCircle();

// window size indicator
var $ws = $('#winsize'),
    $w = $(window),
    updateSize = function () {
        $ws.text($w.width() + 'px x ' + $w.height() + 'px');
    };

$w.resize(function () {
    updateSize();
    
    // redraw
    makeCircle();
});

updateSize();