Canvas javascript

Question

I am trying to make a "Hidden greeting" using javascript canvas. it is supposed work in this way,when a user clicks on a region of canvas that regions opacity is decreased. For changing this opacity I use pixel data(getImageData). Then I write that text again on that canvas,since the pixel data also changes the text if it was in that region.

The problem I am facing that when I click sometimes in the canvas the text gets visible itself,even if i haven't clicked in the text region.

the code and output can be found here.

See the Pen JBdJzZ by situ25 ( @situ25 ) on CodePen .

The function fillpos() is called when a click happens on the canvas.

 function fillpos(ev){ var canvas=document.getElementById("canvas1"); if(canvas.getContext) { var ctx=canvas.getContext('2d'); ctx.fillStyle='rgb(0,240,0)'; ctx.globalAlpha=0.2; var pos=getMousePos(canvas,ev); var borderWidth=parseInt(getComputedStyle(document.getElementById("canvas1")).borderWidth); var imagedata=ctx.getImageData(pos.x,pos.y,40,40); for(var i=0;i<imagedata.data.length;i+=4) { imagedata.data[i+3]=100; } ctx.putImageData(imagedata,pos.x,pos.y); writeText(); } } function writeText(){ var canvas=document.getElementById("canvas1"); if(canvas.getContext){ var ctx=canvas.getContext('2d'); ctx.font="40px Georgia"; ctx.fillText("Hi There",100,100); //Write text again } } 

Answer 1

重写文本时，取消注释fillstyle并将其设置为rgb(0, 255, 0) fillstyle rgb(0, 255, 0)以重置文本填充颜色。

Answer 2

The problem I am facing that when I click sometimes in the canvas the text gets visible itself,even if i haven't clicked in the text region.

Well that is because you are drawing the text on the canvas regardless of which part of it should be revealed and doing so after having drawing the background/foreground, meaning it is drawn last on top of everything else.

With a single canvas you only have a single layer of image data so you cannot 'reveal' something in a canvas that was not there to begin with.

One way to achieve your goal is to have a separate canvas which only contains the image data for the foreground layer (here called revealLayerCanvas ):

var revealLayerCanvas = document.createElement('canvas');
revealLayerCanvas.width = canvas.width;
revealLayerCanvas.height = canvas.height;
revealLayerCtx = revealLayerCanvas.getContext('2d');

When drawing the canvas first draw the background, then text, then the foreground layer.

function redraw(){
   ctx.fillStyle='rgb(0,240,0)';
   ctx.fillRect(0,0,canvas.width,canvas.height);
   ctx.fillStyle='rgb(0,0,0)';
   ctx.font="40px Georgia";
   ctx.fillText("SECRET",100,100);
   ctx.drawImage(revealLayerCanvas,0,0);
}

When dragging over the image you are revealing a piece of the foreground as you have done in your example.

See Pen for the full working example: Canvas Reveal Layer