Now we will learn some basic methods for doing 2D transformations :
translate(x, y) - It remaps the (0,0) position on the canvas with values x and y.
scale(scalewidth, scaleheight) - It scales the current drawing either bigger or smaller based on scalewidth and scaleheight.
rotate(angle) - It rotates the current drawing based on the angle provided.
Note : By the above code you have modified the coordinates of the current context. So now if you draw anything using the same context, all drawings will be in that modified coordinate system i.e. all drawings will be scaled and rotated.
Save and Restore the Context
You can either save or restore your context based on your requirements. All properties which affect your drawing can be saved using the save() method and you can restore context using the restore() method. One thing to note that contexts are saved in Stack Format ( Last In First Out ), that means the last context which has been saved will be restored by the next restore() call. So it is always good to call restore() for every save operation.
Why Save and Restore is Helpful ?
Saving and Restoring the context will be helpful when you want to draw some shapes at a given position, with a given color etc., and do not want to affect other functions that uses the same context. So lets say you wanted to do some changes using the context object, you do that inside a function where first line will be context.save() and last line will be context.restore().
Drawing Text using Canvas
There are two main methods fillText() and strokeText() for drawing text and have a property font to specify the font style. For example :context.font = "20px Arial";
context.fillText("Codingdefined.com", 10, 10);
context.strokeText("Codingdefined.com", 10, 10);
Check at : http://codepen.io/codingdefined/pen/Vvrogo
Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.
No comments:
Post a Comment