Tag: HTML5

Compositing Methods in Canvas: HTML5

There are 12 different compositing methods in Canvas. By default, source-over is applied for all the drawing operations on canvas.

In this video tutorial, we draw 2 rectangle and show the effects of applying different compositing methods on them.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

darker compositing method canvas html5

Demo

JavaScript file: Full code
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.fillStyle   = "red";
context.fillRect(40, 40, 250, 100);
 
  context.globalCompositeOperation  = "darker";
 
context.fillStyle   = "blue";
context.fillRect(80, 80, 250, 100);
 }
}

Here we’ve given a value of darker to globalCompositeOperation and the result is as shown in above image. i.e., the intersection region of the two image gets darker color.

Global Composite Operation in Canvas: HTML5


[youtube https://www.youtube.com/watch?v=b9FC6i8FVRg]

YouTube Link: https://www.youtube.com/watch?v=b9FC6i8FVRg [Watch the Video In Full Screen.]



Change the value of globalCompositeOperation to see the effects, as listed in below image:

compositing methods canvas html5

There are 12 different compositing methods:
1. source-over: This is the default value. Here the new image is drawn on top of the existing elements.
2. source-in: Displays only the new element in the region where the intersection takes place.
3. source-out: New drawing shown in the area where it doesn’t overlap with the existing elements.
4. source-atop: Drawing is shown only at the place where the first/existing drawing is present.
5. lighter: The intersection region is drawn in a lighter color.
6. xor: Exclusive or composite method clears the overlapping region and displays the rest of the drawing.

7. destination-over: The older/existing elements/drawing is shown on top of the new element. That is the new element is behind the existing ones.
8. destination-in: Displays only the existing element in the region where the intersection takes place.
9. destination-out: Existing/old element/drawing shown in the area where it doesn’t overlap with the new element/image.
10. destination-atop: Drawing is shown only at the place where the new element/drawing is present.
11. darker: The intersection region is drawn in a darker color.
12. copy: older content/element/image is removed and only the new content/element is shown.

globalAlpha and RGBa in Canvas: HTML5

Today lets learn about globalAlpha and rgba properties of Canvas.

Lets draw 2 rectangle and apply rgba and see how it’ll be affected by globalAlpha setting.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file
myScript.js

1
2
3
4
5
6
7

context.globalAlpha = 0.5;
 
context.fillStyle   = "rgba(255, 0, 0, 0.5)";
context.fillRect(100, 100, 150, 50);
 
context.fillStyle   = "blue";
context.fillRect(100, 25, 150, 50);

Here we’ve set the globalAlpha value to 0.5, which will be applied to all the elements present on the canvas irrespective of its individual alpha values.
For Example: If we have a globalAlpha of 0.5 and we set individual alpha(using RGBa) to 0.5, then the individual element will have an alpha of 0.5 of it’s globalAlpha 0.5 i.e., half of the globalAlpha.

globalAlpha and RGBa in Canvas: HTML5


[youtube https://www.youtube.com/watch?v=TtnGYP0AXd0]

YouTube Link: https://www.youtube.com/watch?v=TtnGYP0AXd0 [Watch the Video In Full Screen.]



Note: globalAlpha and rgba take values from 0.0 to 1.0

JavaScript file: Full Code
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.globalAlpha = 0.5;
 
context.fillStyle   = "rgba(255, 0, 0, 0.5)";
context.fillRect(100, 100, 150, 50);
 
context.fillStyle   = "red";
context.fillRect(100, 25, 150, 50);
}
}

Take 2 rectangles with red color, so that you can easily compare the alpha differences between them, as you apply alpha value to them individually.

A canvas rgba() example:

rgba canvas html5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

 
window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
  // Draw background
  context.fillStyle = 'rgb(255,221,0)';
  context.fillRect(0,0,150,37.5);
  context.fillStyle = 'rgb(102,204,0)';
  context.fillRect(0,37.5,150,37.5);
  context.fillStyle = 'rgb(0,153,255)';
  context.fillRect(0,75,150,37.5);
  context.fillStyle = 'rgb(255,51,0)';
  context.fillRect(0,112.5,150,37.5);
 
  // Draw semi transparent circles
  for (i=0;i<10;i++){
    context.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
    for (j=0;j<4;j++){
      context.fillRect(5+i*14,5+j*37.5,14,27.5)
    }
  }
 }
}

Above code for self learning .. :-)

Custom Transformation in Canvas: HTML5

Today lets learn how to apply custom transformation to our drawings on canvas.

custom transformation canvas html5

In this video tutorial, we draw 3 rectangles and show you how scale, skew and move properties of custom transform methods work.

Custom Transformation Methods
transform(a, b, c, d, e, f);
setTransform(a, b, c, d, e, f);

custom transformation matrix canvas html5

Custom transformation takes the form of a square matrix, as shown above.

a – Scales drawing horizontally
b – Skews drawing horizontally
c – Skews drawing vertically
d – Scales drawing vertically
e – Moves drawing horizontally
f – Moves drawing vertically

Recommended Read:
Translate Transformation in Canvas: HTML5
Scale Transformation in Canvas: HTML5
Rotate Transformation in Canvas: HTML5

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Transform method
myScript.js

1
2
3
4
5
6
7

context.fillStyle = "blue";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0.5, 0.5, 1, 10, 10);
 
context.fillStyle = "red";
context.fillRect(5, 5, 150, 75);

transform() method changes the origin of the canvas to (x, y) = (10, 10) and scale horizontally and vertically, so that we can see it drawn on the canvas. Also skews by 0.5 both horizontally and vertically.

JavaScript file: Transform method is Additive
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12

context.fillStyle = "blue";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0.5, 0.5, 1, 10, 10);
 
context.fillStyle = "red";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0, 0, 1, 20, 200);
 
context.fillStyle = "gray";
context.fillRect(5, 5, 150, 75);

Using transform() method we draw third rectangle at (x, y) = (20, 200); And horizontal and vertical skew is made 0, but still a skew of 0.5 is applied both in horizontal and vertical direction, since the transform() method written before for second rectangle is influencing it.

JavaScript file: setTransform method is not Additive
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12

context.fillStyle = "blue";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0.5, 0.5, 1, 10, 10);
 
context.fillStyle = "red";
context.fillRect(5, 5, 150, 75);
 
context.setTransform(1, -0.5, 0, 1, 20, 200);
 
context.fillStyle = "gray";
context.fillRect(5, 5, 150, 75);

setTransform() method is non-additive in nature. It is independent of its previous transformation matrix. All other parameter and behavior are same with respect to transform() and setTransform() methods.

Custom Transformation in Canvas: HTML5


[youtube https://www.youtube.com/watch?v=9eyr9MQNAuM]

YouTube Link: https://www.youtube.com/watch?v=9eyr9MQNAuM [Watch the Video In Full Screen.]



JavaScript file: Full Free Code
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.fillStyle   = "blue";
context.fillRect(5, 5, 150, 75);
 
context.transform(1, 0.5, 0.5, 1, 10, 10);
 
context.fillStyle   = "red";
context.fillRect(5, 5, 150, 75);
 
context.setTransform(1, -0.5, 0, 1, 20, 200);
 
context.fillStyle   = "gray";
context.fillRect(5, 5, 150, 75);
}
}

Skewing can be done both in positive and negative direction, as shown in the video. If you previously used scale() and/or rotate() transformations that will be additive to transform() method, and will have no influence on setTransform() method.

Rotate Transformation in Canvas: HTML5

Today lets learn about rotate transformation. And also lets see how we can use translate transformation and rotate transformation to create simple animation.

Recommended Read:
Translate Transformation in Canvas: HTML5
Scale Transformation in Canvas: HTML5

rotate transformation canvas html5

Demo

Syntax
rotate(angleInRadians);
The rotate() transformation causes the subsequent drawing operations to be rotated by a given angle. Note that the angles are in radian and not in degrees. Also the rotation takes place around the current origin and not with respect to the center of the object or the element drawn.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Rotate Transformation On a rectangle
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
context.fillStyle   = "blue";
                context.fillRect(150, 50, 100, 50);
                context.rotate(0.5);
                context.fillRect(150, 50, 100, 50);
 
}
}

Here we take 2 rectangles with same x and y axis and same width and height. For second rectangle we apply a rotation of 0.5 radians. With this you can see that the rotation takes place with respect to the origin of the canvas, which is (0, 0).

JavaScript file: Rotate Transformation On a Circle
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
var rdl             = context.createRadialGradient(175, 175, 25, 175, 175, 100);
rdl.addColorStop(0.0, "#f00"); //RED
rdl.addColorStop(0.5, "#00f"); //BLUE
rdl.addColorStop(1.0, "#0f0"); //Green
 
 
setInterval(function(){
context.beginPath();
context.fillStyle  = rdl;
context.arc(175, 175, 100, 0, 2 * Math.PI);
context.fill();
context.translate(175, 175);
context.rotate(2);
}, 50);
 
}
}

Here we draw a radialgradient and rotate it with 2 radians with a time interval of 50 milliseconds. Before we rotate the circle we change the origin of the canvas to 175px x-axis and 175px y-axis, so that the rotation takes place with respect to the point (175, 175).

Rotate Transformation and Animation in Canvas: HTML5


[youtube https://www.youtube.com/watch?v=U3v5J-fOeV0]

YouTube Link: https://www.youtube.com/watch?v=U3v5J-fOeV0 [Watch the Video In Full Screen.]



Note:
We convert degree to radian using a simple mathematical formula:
Radian = (PI / 180 ) * degree;

While developing moving objects in our applications(like online games applications), we need not remember lot of locations/points on the canvas to move our element, instead, we can change the origin of the canvas using translate transformation and move the elements or rotate them!

Scale Transformation in Canvas: HTML5

Today lets learn about scale transformation.

scale-transformation-canvas-html5

Syntax
scale(x, y);
Scales drawing operations by multiples of x and y.

Related read: Translate Transformation in Canvas: HTML5 (important)

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Scale Transformation of 2 rectangles
myScript.js

1
2
3
4
5
6

context.fillStyle  = "red";
context.fillRect(10, 10, 50, 50);
 
context.scale(2, 2);
context.fillStyle  = "blue";
context.fillRect(40, 40, 50, 50);

Here we have 2 rectangles with red and blue color, at two different x, y axis, but with same height and width i.e., 50px each
But using scale() method, we scale the second rectangle by 2. So the second rectangle is drawn at 80px x-axis, 80px y-axis with a width and height of 100px.

JavaScript file: Scale Transformation of 3 rectangels
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12

context.fillStyle  = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.scale(2, 2);
context.fillStyle  = "blue";
context.fillRect(40, 40, 50, 50);
 
context.restore();
context.scale(0.5, 0.5);
context.fillStyle  = "green";
context.fillRect(100, 40, 50, 50);

Here we save the scale value of first rectangle(which is 1,1), and restore it for the third rectangle – using canvas status. If we don’t use canvas status, then the (0.5, 0.5) scale for the third rectangle will be applied with respect to the second rectangle which has a scale of (2, 2). Hence, third rectangle scale will be (1.5, 1.5). As 2.0 – 0.5 = 1.5

JavaScript file: Full Free Code
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

window.onload = canvas;
 
function canvas()
{
    var myCanvas = document.getElementById("myCanvas");
 
    if( myCanvas && myCanvas.getContext("2d") ) 
    {
var context         = myCanvas.getContext("2d");
context.fillStyle  = "red";
context.fillRect(10, 10, 50, 50);
context.save();
 
context.scale(2, 2);
context.fillStyle  = "blue";
context.fillRect(40, 40, 50, 50);
 
context.restore();
context.scale(0.5, 0.5);
context.fillStyle  = "green";
context.fillRect(100, 40, 50, 50);
    }
}

With save and restore methods applied:
1st rectangle: (1.0, 1.0);
2nd rectangle: (2.0, 2.0);
3rd rectangle: (0.5, 0.5);

Without save and restore methods applied:
1st rectangle: (1.0, 1.0);
2nd rectangle: (2.0, 2.0);
3rd rectangle: (1.5, 1.5);

Scale Transformation in Canvas: HTML5


[youtube https://www.youtube.com/watch?v=kGLYu62ao6Q]

YouTube Link: https://www.youtube.com/watch?v=kGLYu62ao6Q [Watch the Video In Full Screen.]



The scale() transformation causes drawing operations to be multiplied by a given scale factor in the x and y direction.

scale() transformation can be applied to any drawing operation on the canvas, like circles, triangle, images etc.