save and restore - convas

Course- HTML5 >

The save() method saves the state of the canvas on a stack while the restore()

method will return the last saved state from the stack.

Let's look at the following code to understand the save() and restore()

methods better:

<!DOCTYPE HTML>

<html>
<head>
<script type = "text/javascript"> function demoTranslation() {
var canvas = document.getElementById('fstrd');
 
var context = canvas.getContext('2d');
context.fillStyle = "silver"; context.fillRect(30, 30, 150, 100);
context.translate(50, 25);
context.fillStyle = "navy"; context.fillRect(30, 30, 200, 100);
}
</script>
</head>
<body onload = "demoTranslation();">
<canvas id = "fstrd"></canvas>
</body>
</html>

The output of the code will be displayed, as shown in the following screenshot:

save

Let's look at how the code works. The irst rectangle of silver color is created and the settings are saved on the memory stack. Then, we define another rectangle of the color, lime, which is inside the silver rectangle. Then, we revoke the saved rectangle using the restore() method. We just change the dimensions of the restored rectangle and it is seen inside the lime rectangle. Hence, we can return a saved shape from the stack, which is saved by the save() method, using the restore() method.

Transformations

Transformations in HTML5 can be deployed in the following ways:

translate
rotate
scale

translate

Translation means the ability to relocate the drawing on the canvas.

By using the translate property, we can relocate the drawn shape to a different location. We need to remember that we need to call the translate function, following which it would be implemented.

Let's look at the following code to understand the translate property better:

<!DOCTYPE HTML>

<html>
<head>
<script type = "text/javascript"> function demoTranslation() {
var canvas = document.getElementById('fstrd'); var context = canvas.getContext('2d');
context.fillStyle = "silver"; context.fillRect(30, 30, 150, 100);
context.translate(50, 25);

context.fillStyle = "navy"; context.fillRect(30, 30, 200, 100);
}
</script>
</head>
<body onload = "demoTranslation();">
<canvas id = "fstrd"></canvas>
</body>
</html>

The output of this code would be as shown in the following screenshot:

If you read through the preceding code, you will find out the silver rectangle retains its original location. We have used the translate function after we defined the silver rectangle. The translate property worked with the blue rectangle. Hence, it is understood that the translate function must be called before the shape and its dimensions are defined.

rotate

We can rotate any shape within the boundaries of the canvas by using the rotate()

method. The rotate() method is defined, as shown in the following code:

<!DOCTYPE HTML>

<html>
<head>
<script type = "text/javascript"> function demoRotation() {
var canvas = document.getElementById('fstrd'); var xyz = canvas.getContext('2d');
xyz.strokeRect(10, 10, 120, 120);
xyz.rotate((Math.PI / 180) * 25);   //rotate 25 degrees.
xyz.fillStyle = "#0000ff"; xyz.fillRect(10, 10, 50, 50);
}
</script>
</head>
<body onload = "demoRotation();">
<canvas id = "fstrd"></canvas>
</body>
</html>

The output of the code is displayed in the following screenshot:

We have used a variable, xyz, to obtain a reference to the 2d context of the canvas. Then, we draw a rectangular outline using the strokeRect property. Then, we call the rotate function. After we have called the rotate function, we deine a rectangle using the fillRect property, and use fillStyle to ill it with blue color. Similar to the translate function, the rotate property works on the blue rectangle and not on the irst rectangle, as the blue rectangle code was written after we called the rotate function. Hence, we need to call this method prior to deining any shape in order for it to rotate.

scale

Scaling of any shape on the canvas is possible by using the scale property. Let's look at the following code to see how scale works:

<!DOCTYPE HTML>

<html>
<head>
<script type = "text/javascript"> function demoScale() {
var canvas = document.getElementById('fstrd'); var context = canvas.getContext('2d');
context.fillStyle = "navy"; context.fillRect(10, 10, 50, 90);
context.scale(3, 3);
context.fillStyle = "silver"; context.fillRect(10, 10, 50, 90);
}
</script>
</head>
<body onload = "demoScale();">
<canvas id = "fstrd" width = "400" height = "400"></canvas>
</body>
</html>

The output of the code will be, as shown in the following screenshot:

In the preceding code, we have used a scale of (3:3). Similar to translate and rotate, the scale property is applicable to only the second rectangle as the method was called before the silver rectangle. The navy-colored rectangle will remain in its original state as the method was not called before deining it.

Animation

If we observe the complex websites today, we can see that there is a lot of animation that goes on behind them. It is now easier to use animation with the advent of the canvas element in HTML5 in conjunction with JavaScript. In HTML5, we need to draw and redraw and clear the canvas so fast that it seems like an animation. We

will be using the window.requestAnimationFrame property, which tells the browser that animation will be performed. It is a callback function that tells the browser to repaint the canvas for the next frame.

Let's look at the following code to understand animation better:


<html>
<head>
<style type = "text/css">
#fstrd {
border:lime 10px solid
}
</style>
<title>Canvas tutorial</title>
<script type="text/javascript"> var x = 0;
var y = 15; var z = 5;

function demoAnimation() {
animationMethod = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame
;
animationMethod(demoAnimation); x = (x + z);
if(x <= 0 || x >= 370) { z = -z;
}
draw();
}

function draw() {
var canvas = document.getElementById("fstrd"); var context = canvas.getContext("2d");
context.clearRect(0, 0, 500, 170); context.strokeStyle = "black"; context.strokeRect(x, y, 25, 25);
}

demoAnimation();
</script>
</head>
<body onload = "draw();">
<canvas id = "fstrd" width = "400" height = "400"></canvas>
</body>
</html>

The output of the code is displayed in the following screenshot:

In the preceding screenshot, we see a rectangle moving back and forth within the

defined boundaries of the canvas frame.

We have used CSS styling to depict the boundaries of the canvas in green. Then,

we defined a demoAnimation function in JavaScript. Then, we invoked the callback function, window.RequestAnimationFrame, and assigned it to the animationMethod function. We have added a preix of moz,ms,webkit before RequestAnimationFrame so that it is compatible with the latest versions of browsers such as IE, Mozilla Firefox, and Chrome. Then, we passed the demoAnimation function inside the animationMethod. By doing this, we have made sure that the browser will call the demoAnimation function when the next frame is ready to be drawn for animation purposes. The canvas has to be cleared for the next frame to be drawn. Hence, we

use the draw function, which helps us do that. If we observe the preceding code, we can see that the demoAnimation function is called at the end. This is to get window. RequestAnimationFrame into action so that we can begin the animation process, and hence, this makes it mandatory.

PRV MENU NEXT