Canvas use a letter instead of a shape? <p>I have written up an example, being new to canvas I need help transforming a basic circle into a letter.</p> <p><a href="http://jsfiddle.net/B3KK3/3/" rel="nofollow">Fiddle</a></p> <p>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. </p> <p>So just imagine where the circle is a letter being in that spot, still transparent with a rectangle overlaying the image with the color <code>rgba(255,255,255,0.7)</code>.</p> <pre><code>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(); } } </code></pre>