Tuesday , 18 June 2019
Home / Programming / JavaScript / Transformations – Advanced JavaScript Tutorial

Transformations – Advanced JavaScript Tutorial

Transformations allow you to add cool effects to your drawings. This tutorial will cover that and we’ll fix the problem with fuzzy drawings.

Fixing Fuzzy Drawings

Previously, we set the width and height of the canvas using CSS. This is the wrong way to do things as it can actually stretch our drawings and make it appear fuzzy and blurry. Let’s fix this by updating our document like so.

Instead of using the CSS properties, we use the attributes to set the width and height of the canvas. This will fix all our problems now and we can now continue with the tutorial.


Clear your script and add this bit of code.

A new method is introduced here called the rotate() method. This method has 1 argument which is the amount of radians the drawing should be rotated. To get radians, you simply multiply the amount of degrees you want by the result of 180/PI. In the above example, we do just that. The math will be calculated before the rotate() method takes effect.

ALL drawings created after the rotate() method will be rotated. If we were to add our rotate() method after our drawing, then our drawing won’t be rotated. You should also know that the drawing doesn’t rotate on itself, but around the origin. The origin is usually 0,0 of the canvas.


Scaling a drawing is basically increasing or decreasing the size of the drawing.  Update your rotate() method to this.

If you refresh the page, then you should see the drawing double it’s size. The scale() method has 2 arguments. The first argument is the value the width should be multiplied by. In our case, we set the original width to 50. The scale() method will multiply 50 by 2. The second parameter is the value the height should be multiplied by. By default, 1 represents 100% of the original width and height.

You can decrease the size by doing something like this.


As discussed before, the origin point by default is 0,0 which is the top left corner of the canvas. To change the origin point, you use the translate() method.  Add this bit of code.

In this example, we draw a rectangle at the origin of the canvas. We then apply the translate() method. To change the origin point, you pass in the x and y coordinates of the new origin point. We then draw another rectangle with the same parameters passed in the first time. However, if you refresh your page, then you should see the second rectangle drawn from the new origin point.

You can also use negative coordinates. Update your second rectangle to this.

This will move our rectangle right below the first one.

Saving and Restoring

In some cases, you’ll want to restore the settings you had previously. Add this bit of code.

Before we do anything, we save the default settings using the save() method. Then, we end up doing a lot of changes to the current context. Imagine having dozens of settings and then end up having to copy and paste code again to go back to where you were. It’s really a pain. To go back to the last saved point you use the restore() method.

You can save and restore as many times as you want. You’re not limited to 1 of each.


You can apply various transformations in JavaScript. Just remember to save the default settings as it can come in handy from time to time. For more information the methods for transforming drawings, then go here.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.