Tag Archives: shapes

Getting started with PlayCanvas

PlayCanvas is a 3D game development environment in the cloud. You can use PlayCanvas to make your own 3D games and code them in the JavaScript programming language using a web browser like Chrome or Firefox.

In this tutorial you will learn about the PlayCanvas features and tools and how to create, move, rotate, and resize 3D shapes. Watch the video below to get started with PlayCanvas.

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

Typography in Adobe Illustrator CC

This video tutorial explains how to use typography in Adobe Illustrator CC to create the shape of a zebra with just words.

The aim is to be able to recognise the shape of the zebra after removing the shape or image and just leaving the words behind. Once you have completed the tutorial, your shape might look a bit like this:

More words could be added in a smaller font size to make the shape even clearer.
More words could be added in a smaller font size to make the shape even clearer.

You can also download the PDF instructions here.

Download the PDF file

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 draw your own objects in Adobe Flash CS6

This video tutorial explains how you can draw your own objects or shapes in Adobe Flash CS6 using a range of drawing tools including the pencil, brush, paint bucket, line, and shape tools. You can also watch the video on YouTube here if your prefer.