Last Updated:

Effect images with Canvas

Creating your site, you probably more than once thought about how beautifully you can arrange the elements on the future resource in the necessary way so that the user is extremely clear but does not clutter the visual eye. In this case, you do not need to build a bicycle, and suffer to create something that has already been invented before you. In this tutorial, we'll look at how you can style images using the canvas element. Which will allow you to visually highlight your images while giving them a special zest.

 

The idea is that a gray "copy" of the image will be created by the canvas element, and the visual transformation when the cursor is hovered will be performed by CSS3 transformations. And so, let's get started.

Step 1. HTML

The markup is very simple. Each gallery item is an item in an unordered list.

Image Effect with Canvas | Demo for Productive Quality Code website
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<pre>
<div id="wrap">
<ul id="gallery">
<li><a href="#" rel="nofollow" target="_blank"><img src="images/flo1.jpg" alt="" /></a>
<div>Image description</div></li>
<li><a href="#" rel="nofollow" target="_blank"><img src="images/flo3.jpg" alt="" /></a>
<div>Image description</div></li>
<li><a href="#" rel="nofollow" target="_blank"><img src="images/flo2.jpg" alt="" /></a>
<div>Image description</div></li>
</ul>
<span style="color: white;">Photos by </span><a href="#" rel="nofollow" target="_blank">Pinkonhead</a></div>
</pre>

As you noticed, the markup is quite simple, so you should not dwell on it in more detail, let's move on to the next step.

 

Step 2. CSS

First, let's look at a set of simple reset styles:

html, body, div, span, h1, h2, p, a, ul, li, img
{margin: 0; padding: 0;
border: 0; outline: 0;
font-size: 100%;background: transparent;}
ul {list-style: none;}
:focus {outline: 0;}
a {text-decoration:none;}

We use 300px x 300px images. The main container #wrap is centered in height (margin: 0 auto) and receives a width of 1020px (=340 x 3). The list item gets the float : left property and is positioned relatively.

#wrap {
width: 1020px
margin: 0 auto;
}
li {
float:left;
position:relative;
display:inline-block;
width:300px;
height:300px;
margin:10px;
padding:10px;
background:#fff;
box-shadow:0 0 5px rgba(0,0,0,.35);
}
li div {
position:absolute;
height:0;
width:280px;
background:rgba(0,0,0,.45);
overflow:hidden;
bottom:10px;
left:10px;
padding: 010px;
line-height:50px;
color:#fff;
transition:height 1s;
}
li:hoverdiv {
height:50px;
}

The title of the image is wrapped in a div element that will slide up when the mouse pointer hovers over the image. To create visual effects, use the css3 transition.

Let's add styles for the canvas element.

canvas {
opacity:1;
position:absolute;
top:10px;
left:10px;
transition:opacity 1s .2s;
}
li:hover canvas {
opacity:0;
}

Step 3. Canvas

Now let's start using the HTML5 canvas element to form a gray version of the image.

$(window).load(function() {


$('#gallery img').each(function() {


createCanvas(this);
});


function createCanvas(image) {


var canvas = document.createElement('canvas');
if (canvas.getContext) {
varctx = canvas.getContext("2d");


// Determine the size of the canvas element
canvas.width = image.width;
canvas.height = image.height;


// Once we have the source image object, we can use the drawImage(reference, x, y) method to draw it on the canvas element.
// x, y - coordinates where the image should be placed.
ctx.drawImage(image, 0, 0);


// Get the image data and store it in the imageData array.
// Get data about points using the getImageData() method.
// Data includes dot color (decimal, RGB value) and transparency (alpha channel value).
// Each color is represented by an integer value between 0 and 255.
// imageData.da contains data of (height x width x 4) bytes with an index ranging from 0 to (height x width x 4)-1.
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
pixelData = imageData.data;


// Loop through all the points in the imageData array
// and modification of color values.
for (var y = 0; y < canvas.height; y++) {
for (var x = 0; x < canvas.width; x++) {


// Calculate the index of the desired point (x,y):
var i = (y * 4 * canvas.width) + (x * 4);


// Get the RGB value.
var red = pixelData[i];
var green = pixelData[i + 1];
var blue = pixelData[i + 2];


// Convert color to gray scale. One of the conversion formulas:
var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11);


pixelData[i] = grayScale;
pixelData[i + 1] = grayScale;
pixelData[i + 2] = grayScale;
}
}


// Put the modified imageData back into the canvas element.
ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);


// Insert a canvas element into the DOM, before the image:
image.parentNode.insertBefore(canvas, image);
}
}
});

The createCanvas function creates an element, gets a copy of the image, converts and outputs the result to a canvas element, and then inserts it into the DOM structure. Using the .each() method, the createCanvas function iterates through all the images in the #gallery list.

That's it. Ready!