CODEWITHSUNDEEP
javascripthtmlcanvas
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13492

html5 canvas center circle

Okay, so I am new to canvas, I am trying to learn. I have created something below that sorta works - JSFiddle demo.

You see in the middle there is a circle, I would like that to be transparent, so, obviously, if you look at the code below there are two paths or objects, whatever they're called, and they overlay each other. Not what I need, obviously.

My question is: how do I have a canvas element/object take over the screen size with a transparent middle showing the background? The goal is to make something like this http://www.jcsuzanne.com/. I will eventually work my way up from a circle to a letter, but for now I am not sure how to make a "mask" with a transparent center.

var canvas = document.getElementById('c');

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        /**
         * Your drawings need to be inside this function otherwise they will be reset when 
         * you resize the browser window and the canvas goes will be cleared.
         */
        drawStuff(); 
}
resizeCanvas();

function drawStuff() {

    if (canvas.getContext){

        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;

        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgba(0,0,0,0)';
        context.fill();
        context.lineWidth = 5;
        context.stroke();

        context.beginPath();
        context.fillStyle = 'rgba(0,0,0,0.5)';
        context.fill();
        context.fillRect(0,0,window.innerWidth,window.innerHeight);

    }
}

Upvotes: 2

Views: 6005

Answers (1)

user1693593
user1693593

Reputation:

You can re-organize the lines a little and use composite mode to "punch" a whole in the overlay:

// fill background first
context.fillStyle = 'rgba(0,0,0,0.5)';
context.fillRect(0,0,window.innerWidth,window.innerHeight);

// define the arc path
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

// stroke it
context.lineWidth = 5;
context.stroke();

// make alpha solid (the color doesn't matter)
context.fillStyle = 'rgba(0,0,0,1)';

// change composite mode and fill
context.globalCompositeOperation = 'destination-out';
context.fill();

// reset composite mode to default
context.globalCompositeOperation = 'source-over';

Modified fiddle

Upvotes: 1

Related Questions