如何清除HTML画布中某节的反面？

Question

I have a Square in HTML5 Canvas : (Let's assume)

context.beginPath();
context.moveTo(0,0);
context.lineTo(0, 100);
context.lineTo(100, 100);
context.lineTo(100, 0);
context.closePath();

It is a 100*100 square. In 400*400 canvas, I want to show the 100*100 square and hide everything else. How do I do this?

Note: I just gave an example of square. I have a complex shape in my canvas which is to be cropped. Other is to cleared. So, I am specifically looking for a crop or a copy to a different canvas and paste back. :) Below is what I am trying to do. I need to keep only what is in the star. Remove everything else.

Answer 1

You could try the .clip() function. You can use .save() to save the state to .restore() after the clip so it isn't destructive. You can set the path to whatever you would like and it will create a vector mask of that shape.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function () {
    context.save();
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, 100);
    context.lineTo(70, 200);
    context.lineTo(100, 0);
    context.closePath();
    context.clip();
    context.drawImage(img, 0, 0);
    context.restore();
}

img.src = "https://www.noao.edu/image_gallery/images/d2/m51-400.jpg";

See Fiddle here .

Answer 2

If your "complex shape" is defined in a path command (like the square path command in your example--only your path is more complex), then you can use compositing to eliminate all but the pixels inside the path:

(1) Define your path and fill it with a solid color,

(2) Set compositing to source-in which will draw new pixels only where existing solid pixels are present and everything else is made transparent.

    context. globalCompositeOperation='source-in';

(3) draw your starfield image. The image will appear only inside the path--everything else will be transparent.

Here's example code and a Demo:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var img=new Image(); img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water.jpg"; function start(){ var points=[]; points.push({x:150,y:0}); points.push({x:200,y:100}); points.push({x:250,y:100}); points.push({x:225,y:150}); points.push({x:250,y:200}); points.push({x:100,y:200}); points.push({x:150,y:0}); ctx.beginPath(); ctx.moveTo(points[0].x,points[0].y); for(var i=0;i<points.length;i++){ ctx.lineTo(points[i].x,points[i].y); } ctx.closePath(); ctx.fill() ctx.globalCompositeOperation='source-in' ctx.drawImage(img,0,0); } 

 body{ background-color: ivory; } #canvas{border:1px solid red;} 

 <canvas id="canvas" width=300 height=300></canvas> 

Answer 3

Try something like this

context.fillStyle = "rgba(255, 255, 255, 1)";
context.fillRect(0, 100, 400, 400);
context.fillStyle = "rgba(255, 255, 255, 1)";
context.fillRect(100, 0, 400, 400);

http://jsfiddle.net/xqzxawyb/1/

Answer 4

<canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(0,0,100,100);
ctx.stroke();

DEMO : http://jsfiddle.net/q776zjdx/