HTML5 canvas

Jeg forsøger at lave en HTML5 funktion, hvor en bruger kan markere et (firkantet) område med musen, men med nogle ekstra funktioner.

Jeg har den grundlæggende funktion (indsat herunder), hvor jeg kan markere et område. Men jeg har brug for at udvide den med disse ting...

1. Når man markere et område, skal opacity på det markerede område være 1.0, mens opacity på resten af canvas skal være 0.4.

2. Man skal kunne flytte den firkant man har markeret med musen (og opacity skal så ændres som hvis man havde tegnet en ny firkant).

3. Den firkant man laver, skal tvinges til at følge et forudbestemt forhold, f.eks. at den skal være kvadratisk (det skal blot hardcodes i denne version).

Nogle der kan hjælpe med en eller flere af disse ting?



var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rect = {},
    drag = false;

    function draw() {
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    }

    function mouseDown(e) {

        rect.startX = e.pageX - this.offsetLeft;
        rect.startY = e.pageY - this.offsetTop;
        drag = true;
    }

    function mouseUp() {
        drag = false;
    }

    function mouseMove(e) {
        if (drag) {
            rect.w = (e.pageX - this.offsetLeft) - rect.startX;
            rect.h = (e.pageY - this.offsetTop) - rect.startY;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            draw();
        }
    }

    function init() {
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mousemove', mouseMove, false);
    }

    init();