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>
 <title>Clipping shapes</title>
 background-color: white;
 border: 1px solid black;
 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.rect(0, 0, 100, 100)
 window.onload = draw;
 <canvas id="myCanvas" width="200" height="200">

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.