Image Gallery using Canvas: HTML5

Lets build a simple image gallery application quickly, using HTML5’s canvas.

directory-structure-image-gallery-application-canvas-html5

Demo

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

JavaScript file: Array Element
myScript.js

 var myImages  = [
'images/1.png',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
'images/5.jpg',
'images/6.jpg',
'images/technotip.jpg'
];

We put some images inside images folder. Create an array and have the paths of all the images inside the array: myImages.

JavaScript file: Creating and Setting Image properties on the fly
myScript.js

var img  = document.createElement("img");
 img.setAttribute('width', context.canvas.width);
 img.setAttribute('height', context.canvas.height);
 img.setAttribute('src', myImages[i++]);

We create img tag on the fly by using createElement() method. And by using setAttribute() method, we set the image tag’s width, height and it’s source(i.e., src). We fetch the image path from the array myImages and loop through the array elements with the help of an index variable i.

JavaScript file: drawImage and setInterval
myScript.js

 setInterval(function(){
 img.setAttribute('src', myImages[i++]);
img.onload    = function(){
if(i >= myImages.length)
{
i = 0;
}
context.drawImage(img, 0, 0, context.canvas.width, context.canvas.height);
}
 }, 2000);

For every 2 seconds delay, the anonymous function sets the image source and checks if the index has exceeded the actual length of the myImages array, if it exceeds, we set it back to the start index 0. Now using drawImage() method, we draw the image on to the canvas.

Simple Image Gallery Application using Canvas: HTML5

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

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

Note: If you’re using separate methods to write the setInterval() calls, then make sure the variables corresponding to canvas, context, image array and the index variables are in global scope.

JavaScript file: Full Free Code!
myScript.js

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
var myImages        = [
'images/1.png',
'images/2.jpg',
'images/3.jpg',
'images/4.jpg',
'images/5.jpg',
'images/6.jpg',
'images/technotip.jpg'
  ];
var img           = document.createElement("img");
var i             = 0;

 img.setAttribute('width', context.canvas.width);
 img.setAttribute('height', context.canvas.height);
 
 setInterval(function(){
 img.setAttribute('src', myImages[i++]);
img.onload = function(){
if(i >= myImages.length)
{
i = 0;
}
context.drawImage(img, 0, 0, context.canvas.width, context.canvas.height);
}
 }, 2000);
}
}

This is a simple image gallery application, and you can build upon this to give some transition effects and make it look lot cooler than this!

Accessing Raw Pixel Data in Canvas: HTML5

Today lets learn how to access individual pixel data on canvas, manipulate it and put it back on to the canvas.

Important Note: Each pixel is composed of 4-bytes.

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

JavaScript file: Full code
myScript.js

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
var imgSrc          = document.getElementById("img");
context.drawImage(imgSrc, 0, 0, 350, 350);
 
var image           = context.getImageData(0, 0, 350, 350);
var pixel           = image.data;
var init            = 1;
 
while(init < context.canvas.height){
for(var j = 0; j < 5; j++)
{
var row    = (init + j) * context.canvas.width * 4;
for(var i = 0; i < context.canvas.width * 4; i += 4)
{
    pixel[row + i]      = 255 - pixel[row + i]; //red
    pixel[row + i + 1]= 255 - pixel[row + i + 1]; //green
    pixel[row + i + 2]  = 255 - pixel[row + i + 2]; //blue
}
}
init += 15;
}
 
context.putImageData(image, 0, 0, 0, 0, 175, 350);
}
}

We draw an image on to the canvas using drawImage() method. Once we draw the image, we get all the raw pixel data of the image using getImageData() method. Extract it’s data property(it’s a single dimension array of raw pixel data) and store it inside a variable called pixel.

To process the image data, we proceed executing until init is lesser than the height of the canvas. Inside the while loop we calculate the current row and it’s width and iterate till the entire row pixels are manipulated. We change the values of RGB and assign it back to those pixels selected using the loop.

Once the control is out of while loop, we put back the image using putImageData() method. We also play around with the optional parameters and put back a portion of the manipulated data on to the canvas.

Manipulating Raw Pixel Data in Canvas: HTML5

[youtube https://www.youtube.com/watch?v=0K-n1NEYB7U]

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

Image data access functions

createImageData(w, h); – Creates new image data with width w and height h.

createImageData(imgData); – Create new image data from an existing one.

getImageData(x, y, w, h); – Gets image data within given bounds.

putImageData(imgData, x, y); – Puts back the modified data on to the canvas.

putImageData(imgData, x, y, [Dx, Dy, Dw, Dh]); – Puts back the modified data on to the canvas, within the specified rectangle.

drawImage() in Canvas: HTML5

Today lets learn in-depth about drawImage() method of HTML5.

Using drawImage() method we can draw a portion or an entire image, fetch a video frame, fetch an image(drawing) from another canvas element. We can grab – re-size, crop etc an image, video or something present on another canvas.

drawImage() syntax

Basic:
drawImage(imgSrc, dx, dy);

imgSrc – image soruce.

Top Right Corner Position
dx – destination/main canvas x-axis value.
dy – destination/main canvas y-axis value.

drawImage(imgSrc, dx, dy, dw, dy);

dw – destination width to which the image should fit into. [optional]
dh – destination height to which the image should fit into. [optional]

drawImage(imgSrc, sx, sy, sw, sh, dx, dy, dw, dy);
sx – source image or video or another canvas elements x-axis value. [optional]
sy – source image or video or another canvas elements y-axis value. [optional]

sw – selecting source image or video or another canvas’s width. [optional]
sh – selecting source image or video or another canvas’s height. [optional]

In other words!!

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

sx – The x coördinate where to start clipping(optional).
sy – The y coördinate where to start clipping(optional).
x – The x coördinate where to place the image on the canvas.
y – The y coördinate where to place the image on the canvas.
swidth– The width of the clipped image(optional).
sheight– The height of the clipped image(optional).

stretch or reduce the image
width– The width of the image to use(optional).
height– The height of the image to use(optional) .

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Canvas: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 <canvas id="myCanvas" width="500" height="300">
  Upgrade Browser
 </canvas>
 
 <canvas id="two" width="50" height="50"></canvas>
 
 <img id="img" src="technotip.jpg" style="display: none;" />
 <video id="video" src="technotip.mp4" style="display: none;"></video>
 
</body>
</html>

Here we have 2 canvas elements. 1 image and 1 video. Image and video are set to display none, so that they’re not shown below or besides the canvas element on the html document. Our main canvas with the id myCanvas has a width of 500px and a height of 300px. This is the canvas on which we draw image by fetching it from an image file or a video frame or another canvas element.

CSS file
myStyle.css

1
2
3

canvas {
border: 2px dotted black;
}

We assign 2px black dotted border to the canvas present on our HTML page.

JavaScript file: Image example
myScript.js

1 2	var myImg = document.getElementById("img"); context.drawImage(myImg, 35, 15, 550, 550, 0, 0, 500, 300);

Fetch the image by its id. Using drawImage() method, we grab a portion of the image and fit display it on the main canvas.

JavaScript file: Fetching video frame
myScript.js

                var myVideo             = document.getElementById("video");
myVideo.play();
 
setInterval(function(){
 
var myCanvas   = document.getElementById("myCanvas");
var context    = myCanvas.getContext("2d");
 
var myVideo    = document.getElementById("video");
context.drawImage(myVideo, 30, 0, 950, 720, 0, 0, 500, 300);
 
}, 3000);

We grab the video using its id. using play() method, we start playing the video automatically. Once the video starts playing, we set the time interval to 3 seconds and for every 3 seconds we grab the current video playback frame and display it on the specified position and in specified width and height of the main canvas.

JavaScript file: Fetching image from another canvas
myScript.js

canvas2.arc(25, 25, 25, 0, 2 * Math.PI);
canvas2.fillStyle   = "red";
canvas2.strokeStyle = "blue";
canvas2.fill();
canvas2.stroke();
 
context.drawImage(second, 0, 0, 50, 50, 120, 20, 250, 250);

Here we draw a circle on smaller canvas. And then display it on main canvas by enlarging it.
Related: Draw Arcs/Circle with Canvas: HTML5

JavaScript file: Full Code
myScript.js

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context          = myCanvas.getContext("2d");
 
 
// var myImg         = document.getElementById("img");
// context.drawImage(myImg, 35, 15, 550, 550, 0, 0, 500, 300);
 
 
 
var second           = document.getElementById("two");
var canvas2          = second.getContext("2d");
 
canvas2.arc(25, 25, 25, 0, 2 * Math.PI);
canvas2.fillStyle    = "red";
canvas2.strokeStyle  = "blue";
canvas2.fill();
canvas2.stroke();
 
context.drawImage(second, 0, 0, 50, 50, 120, 20, 250, 250);
 
 
 
var myVideo          = document.getElementById("video");
myVideo.play();
 
setInterval(function(){
 
var myCanvas = document.getElementById("myCanvas");
var context  = myCanvas.getContext("2d");
 
var myVideo  = document.getElementById("video");
context.drawImage(myVideo, 30, 0, 950, 720, 0, 0, 500, 300);
 
}, 3000);
 
}
}

By changing the x-axis and y-axis values of source and destination, we can change position of the image and we can snatch a particular video frame or a particular part of an image or another canvas element. By using source / destination width and height we can shrink or stretch the image.

drawImage() in Canvas: HTML5

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

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

drawImage() method will be helpful in building image manipulation and video oriented applications.

Example: You can grab a particular frame image from your video and set it as it’s cover pic! Like YouTube allows video uploader to select a cover image to each video – by default, it’s fetched randomly from the uploaded video file frames.

Clipping Paths in Canvas: HTML5

Today lets learn about clipping paths in HTML5 canvas.

In this tutorial, we take an image and display the image only at particular clipping regions on our canvas.

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>Canvas: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 <canvas id="myCanvas" width="400" height="400">
  Upgrade Browser
 </canvas>
 <img id="myImg" src="technotip.jpg" style="display: none;"/>
</body>
</html>

Here we have a canvas with 400px width and height. Also an image whose display has been set to none.

CSS file
myStyle.css

1
2
3

canvas {
border: 2px dotted black;
}

We assign 2px black dotted border to the canvas present on our HTML page.

JavaScript file: Circular Clipping Path
myScript.js

var myImg = document.getElementById("myImg");
context.arc(200, 200, 180, 0, 2 * Math.PI);
context.clip();
context.drawImage(myImg, 0, 0);

This creates a circular clipping region, with a radius of 180px. We use drawImage() method to draw the image. Clip() method is used to create clipping region.

JavaScript file: random Clipping Path
myScript.js

var myImg = document.getElementById("myImg");
context.beginPath();
context.moveTo(50, 30);
context.lineTo(30, 250);
context.lineTo(390, 350);
context.lineTo(399, 30);
context.closePath();
context.clip();
context.drawImage(myImg, 0, 0);

This creates a random region, which is then clipped and the image is drawn inside this random clipping region.
Related: Canvas Lines and Paths: HTML5

Clipping Paths in Canvas: HTML5

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

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

drawImage() Syntax
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

sx – The x coordinate where to start clipping(optional).
sy – The y coordinate where to start clipping(optional).
x – The x coordinate where to place the image on the canvas.
y – The y coordinate where to place the image on the canvas.
swidth– The width of the clipped image(optional).
sheight– The height of the clipped image(optional).

stretch or reduce the image
width– The width of the image to use(optional).
height– The height of the image to use(optional) .

JavaScript file: Full Code
myScript.js

window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context         = myCanvas.getContext("2d");
 
var myImg           = document.getElementById("myImg");
 
 
context.arc(210, 195, 190, 0, 2 * Math.PI);
 
 
//context.beginPath();
//context.moveTo(50, 30);
//context.lineTo(30, 250);
//context.lineTo(390, 350);
//context.lineTo(399, 30);
//context.closePath();
 
 
context.clip();
context.drawImage(myImg, 0, 0);
}
}

Note: By default, current clipping path is the entire canvas. Clipping path is a region inside which drawing takes place, outside which drawing has no effect. Any path can be a clipping path. You simply draw a path as normal and then call the context’s clip method to clip the region. With this clipping path, we can restrict the drawing to a particular area on the canvas.