Canvas Clip

Clip is used to limits any future drawings to display only clips inside current paths, here clipa means a small piece or image that will be displayed only not full image.

Syntax

var variableName = canvas.getContext(2d);
variableName.clip();

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <canvas> element to draw canvas on webpage
• Assign id <clip> to canvas element
• Give width and height of 200 200 respectivelly
• Use inline style to style canvas element
• Give border and to canvas using css styles
• Border should be 3px solid green
• Use javascript to draw clip on canvas, select any picture for clip

save file with name task.html or task.htm and then open it using any browser and see results.

Solution

 Try Code