HTML5 Canvas Transforms context.rotate(x) function

HTML5 provides several transform operations: scale, translate, rotate and others. Let’s look at the context.rotate(x) function as well as context.shearing.

In order for us to rotate an image on the canvas we need to call several operations in HTML5. Here is a code example that will rotate an image for you.

function canvasTransformExample(context) {

var myImage = new Image();

myImage.src = "image.jpg";

context.save();

context.rotate(2);

context.drawImage(myImage,0,0,10,10);

context.restore();

}

</script>

This code allows you to rotate image by factor of 2 after image has been drawn on the canvas.

Adding Text to HTML5 Canvas

HTML5 canvas API provides ways to add text to our canvas. Text that we add to canvas takes on the same behavioral patterns as any other object on the canvas as a result operations that can be applied to images on canvas, can be applied on text.

Here is a snippet of code that allows you to add text to HTML5 canvas:

1. fillText(myText,x,y,width);
2. strokeText(myText,x,y,width);

Both of these routines takes your text as argument and rdaw this text as specified by the dimensions x and y. There is another argument called width which is option and used to specify size of the text.

We can use background patterns to manage how our text is displayed. There are three different properties in HTML5 that help us to achieve this goal: font, textAlign and textBaseline.

In addition, we can modify text appearance with the help of the following functions.

context.font = "10px arial";

context.fillStyle = '#778800';

context.textAlign = 'center';

We applied font size and font type via using context.font function and filled our text with nice color via context.fillStyle and then aligned it to the center of the screen.