Tag Archives: clipping

Clipping shapes on the canvas

This tutorial will explain how to clip shapes on the canvas. The clipped shape example in the video will look like this:

Screen Shot 2015-05-08 at 7.01.35 pm

Watch the video below and then scroll down to see the sample code.

Here is the sample code:

<!DOCTYPE html>
<html>
<head>
 <title>Clipping shapes</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
</head>
<body>
 <script>
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 ctx.rect(50, 50, 100, 100) // x, y, width, height
 // we will clip one rectangle with the other 
 ctx.clip();
 ctx.rect(0, 0, 100, 100)
 ctx.stroke();
 }
 window.onload = draw;
 </script>
 
 <canvas id="myCanvas" width="200" height="200">
</body>
</html>

Next tutorial: Drawing arcs and circles on the canvas

How to create a clipping mask effect in Adobe Photoshop CC 2014

In this video tutorial, I explain how to create a 3D clipping mask effect by using an image to fill in the letters of a text object in Adobe Photoshop CC 2014. The steps are identical in Photoshop CS6. View the video below or click here to watch it on YouTube.