CODEWITHSUNDEEP
javascripthtmlcsscanvastransparency
mmm
mmm

Reputation: 2297

Cut through a canvas element with text/no images

I want to make an element where the text is transparent and the rest of the div is solid, so that if it's fixed position, you can see through the text to the background.

I'd normally just use an alpha-mapped image for this, however, I need this text to be changed by a user at their whim so that no matter what text is in the element, it will be transparent. The key here though that you can't do with a normal div is having an actual background color on the element that contains the text.

I'm very new to canvas elements, but I'm wondering if it's possible to do with a canvas element, and if so, could you point me in the right direction?

Upvotes: 3

Views: 1851

Answers (3)

Thurstan
Thurstan

Reputation: 1716

You could also consider SVG clipping masks which is much simpler and doesn't suffer from the 'black box' syndrome that is canvas.

I'm trying to writing you something for specifically your problem.

In the meantime you might find this article will help. http://demosthenes.info/blog/481/Text-Clipping-Masks-With-SVG

Upvotes: 2

markE
markE

Reputation: 105015

You can also do it with compositing: http://jsfiddle.net/m1erickson/9DLuT/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-image:url("http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg"); }
    canvas{border:1px solid red; position:absolute}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.save();
    ctx.beginPath();
    ctx.fillStyle="black";
    ctx.rect(0,0,canvas.width,canvas.height);
    ctx.fill();
    ctx.font="144pt Verdana";
    ctx.globalCompositeOperation="xor";
    ctx.beginPath();
    ctx.fillText("See",30,200);
    ctx.fill();
    ctx.restore();


}); // end $(function(){});
</script>

</head>

<body>
     <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

Upvotes: 2

Prasath K
Prasath K

Reputation: 5018

Yes you can do this with canvas .. You can draw a text in canvas with transparency using rgba(red,blue,green,transparency_value)

HTML:

<canvas id="mycanvas" width="200" height="200" style="width:200px; height:200px; border:1px solid;">
</canvas>

Script:

canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#992200';
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fill();
ctx.closePath();

ctx.fillStyle = 'rgba(255,255,255,1)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("No transparency",canvas.width/2,10);

ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("This is Transparent[0.5]",canvas.width/2,canvas.height/2);

ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("This is Transparent[0.25]",canvas.width/2,canvas.height - 10);

Live Demo

Note: Setting rgba() should be a string ( Mean should be enclosed in quotes )

  1. See about fillText()
  2. See about fillStyle
  3. See about textAlign

Upvotes: 3

Related Questions