Tag Archives: fill

Using colour gradients and patterns

The code below shows how to use linear and radial gradients to fill rectangle shapes.

The three shapes will look like this (linear gradient on top left, radial gradient on top right, image pattern on bottom left side):

Screen Shot 2015-05-08 at 6.53.39 pm

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

Here is the code:

<!DOCTYPE html>
<html>
<head>
 <title>Gradients and patterns</title>
 <style>
 #myCanvas{
 background-color: white;
 border: 1px solid black;
 }
 </style>
 
 <script>
 var patternImage = new Image();
 patternImage.src = "pattern.png";
 function draw(){
 var ctx = document.getElementById("myCanvas").getContext("2d");
 var gradient = ctx.createLinearGradient(0,0,150,0); // x1, y1, x2, y2 
 gradient.addColorStop(0, "red");
 gradient.addColorStop(0.5, "yellow");
 gradient.addColorStop(1, "green");
 ctx.fillStyle = gradient;
 ctx.strokeStyle = "blue";
 ctx.fillRect(0,0,150,75);
 ctx.strokeRect(0,0,150,75);
 
 var gradient2 = ctx.createRadialGradient(350,100,0,350,100,200);
 // ctx.createRadialGradient parameters are x1, y1, r1, x2, y2, r2
 gradient2.addColorStop(0, "yellow");
 gradient2.addColorStop(1, "blue");
 ctx.fillStyle = gradient2;
 ctx.strokeStyle = "blue";
 ctx.fillRect(250,0,200,200);
 ctx.strokeRect(250,0,200,200);
 
 var pattern = ctx.createPattern(patternImage, "repeat");
 ctx.fillStyle = pattern;
 ctx.strokeStyle = gradient;
 ctx.lineWidth = 20;
 ctx.fillRect(20,150,200,200);
 ctx.strokeRect(20,150,200,200);
 }
 window.onload=draw;
 </script>
</head>
<body>
 <canvas id="myCanvas" width="500" height="400">
</body>
</html>

Next tutorial: Simple animations using JavaScript

How to use gradients in Adobe Flash CS6

You can use gradient colours in Adobe Flash CS6 for shapes that you have drawn using the pencil/brush tools or the shape tools. You can create two types of gradients: Linear gradients and Radial gradients. Gradients can combine two or more colours and you can customise the distance between the different colours as well as the angle they follow. You can specify the colour gradient when you create a shape or later on by filling with the paint bucket tool. Watch the video below or click here to view it on YouTube.

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.