CODEWITHSUNDEEP
javascripthtmlcanvas
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13492

Canvas use a letter instead of a shape?

I have written up an example, being new to canvas I need help transforming a basic circle into a letter.

Fiddle

Here is the code you will see in the fiddle. Note the circle drawing is what is in the center of the canvas, I am trying to use a letter like B with a cool font in place of the circle, I am just not sure how to implement this.

So just imagine where the circle is a letter being in that spot, still transparent with a rectangle overlaying the image with the color rgba(255,255,255,0.7).

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;

        // Full rectangle
        context.fillStyle = 'rgba(255,255,255,0.7)';
        context.fillRect(0, 0, window.innerWidth, window.innerHeight);

        // Inner circle
        context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

        // Add a letter instead of a circle?

        // Hmm
        context.fillStyle = 'rgba(0,0,0,1)';
        context.globalCompositeOperation = 'destination-out';
        context.fill();

    }
}

Upvotes: 0

Views: 374

Answers (2)

iSchluff
iSchluff

Reputation: 465

Here again with centering

context.fillStyle = 'rgba(0,0,0,1)';
context.globalCompositeOperation = 'destination-out';
context.textAlign = 'center';
context.font="150px Times";
context.fillText("A",centerX,centerY+40);

http://jsfiddle.net/x4BuF/1/

Upvotes: 1

akonsu
akonsu

Reputation: 29576

why not

context.fillStyle = 'rgba(0,0,0,1)';
context.strokeStyle = "#F00";
context.font = "bold 60pt Arial";
context.globalCompositeOperation = 'destination-out';
context.fillText("B", 20, 50);

http://jsfiddle.net/pqD87/

Upvotes: 1

Related Questions