CODEWITHSUNDEEP
htmlcanvashtml5-canvasdraw
Marcel Bomfim
Marcel Bomfim

Reputation: 121

Remove clipping region from html5 canvas

I'm developing a drawing app , I would put some stencils ( Shape masks ) so that the User can draw above , in the mask format. I can add the stencil ( clipping region) , but I can not remove it . I wonder how can i remove this clipping region from canvas and leave only the draw that the user did it. Here is the code that i use to add the stencil (region clipping):

Obs: I would like to remove (live) it and leave only the draw that the user made inside it.

Link to jsFiddle: Link to app on Js Fiddle

document.getElementById("addstencil").addEventListener("click", addstencil_funcao);

function addstencil_funcao() {


// layer1/Path
  context.save();
  context.beginPath();
  context.moveTo(285.0, 279.0);
  context.lineTo(0.0, 279.0);
  context.lineTo(0.0, 0.0);
  context.lineTo(285.0, 0.0);
  context.lineTo(285.0, 279.0);
  context.globalAlpha=0.3; //Opacidade da empresa
  context.closePath();
  context.fill();

  // layer1/Path
  context.beginPath();
  context.moveTo(211.4, 242.2);
  context.lineTo(144.0, 206.8);
  context.lineTo(76.6, 242.2);
  context.lineTo(89.5, 167.2);
  context.lineTo(35.0, 114.0);
  context.lineTo(110.3, 103.1);
  context.lineTo(144.0, 34.8);
  context.lineTo(177.7, 103.1);
  context.lineTo(253.0, 114.0);
  context.lineTo(198.5, 167.2);
  context.lineTo(211.4, 242.2);
  context.closePath();
  context.fillStyle = "transparent";
  context.fill();
  context.restore();
  context.clip();



var canvasPic = new Image();
canvasPic.src = imagem_source;
context.drawImage(canvasPic, 0, 0);
}

Upvotes: 1

Views: 2770

Answers (1)

markE
markE

Reputation: 105015

Only wrapping the .clip in .save and .restore will clear a clipping region (or resizing the canvas also clear a clip). So the proper order is: .save, .beginPath, lots of path commands (no strokes/fills), .clip, stroke/fill, .restore.

BTW, fillStyle='transparent' will not clear pixels -- it simply leaves existing pixels unchanged. You can "erase" pixels by setting globalCompositeOperation = 'destination-out' and filling the desired erasure path. Here's an example:

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// layer1/Path
context.beginPath();
context.moveTo(285.0, 279.0);
context.lineTo(0.0, 279.0);
context.lineTo(0.0, 0.0);
context.lineTo(285.0, 0.0);
context.lineTo(285.0, 279.0);
context.globalAlpha=0.3; //Opacidade da empresa
context.closePath();
context.fill();
context.globalAlpha=1.00;

// layer1/Path
context.beginPath();
context.moveTo(211.4, 242.2);
context.lineTo(144.0, 206.8);
context.lineTo(76.6, 242.2);
context.lineTo(89.5, 167.2);
context.lineTo(35.0, 114.0);
context.lineTo(110.3, 103.1);
context.lineTo(144.0, 34.8);
context.lineTo(177.7, 103.1);
context.lineTo(253.0, 114.0);
context.lineTo(198.5, 167.2);
context.lineTo(211.4, 242.2);
context.closePath();
context.globalCompositeOperation='destination-out';
context.fill();
context.globalCompositeOperation='source-over';
<canvas id="canvas" width=300 height=300></canvas>

Upvotes: 4

Related Questions