Home » Tutorials

HTML5 Canvas Image Effects App – Adding Blur

Tutorials
Author Reading 12 min Views 849 Published by Modified by

HTML5 Canvas Image Effects App – Adding Blur. Today we continue HTML5 canvas examples, hope that you remember application which we made quite 2 weeks ago? Sure that this was very interesting to you to investigate image processing functions. Today I decided to continue and added new filter here – Blur.

Here are our demo and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. JS
  6. js/script.js
  7. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the example files and lets start coding !

Step 1. HTML

Here are all html of my demo

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03 <head>
04 <link href="css/main.css" rel="stylesheet" type="text/css" />
05 <script type="text/javascript" src="js/script.js"></script>
06 <title>HTML5 Canvas Image Effects App - Adding Blur (demo)</title>
07 </head>
08 <body>
09     <div class="example">
10         <h3><a href="https://www.script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Canvas Image Effects demo (adding blur effect) | Script Tutorials</a></h3>
11         <div class="column1">
12             <input type="button" onclick="resetToGrayscale()" value="Grayscale" /><br />
13             <input type="button" onclick="resetToColor()" value="Color" /><br />
14             <input type="button" onclick="resetToBlur()" value="Blur(1)" /><br />
15             <input type="button" onclick="reset()" value="Reset" /><br />
16             <input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br />
17             <input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br />
18             Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" />
19             <input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br />
20             Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" />
21             <input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br />
22             Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" />
23             <input type="button" onclick="changeColorValue('eb', -10)" value="Less" />
24             Blur: <input type="button" onclick="changeBlurValue(1)" value="More" />
25             <input type="button" onclick="changeBlurValue(-1)" value="Less" /><br />
26         </div>
27         <div class="column2">
28             <canvas id="orig" width="500" height="333"></canvas>
29             <canvas id="panel" width="500" height="333"></canvas>
30         </div>
31         <div style="clear:both;"></div>
32     </div>
33 </body>
34 </html>

Make attention, that since today I made 2 canvas objects. First one will contain original image – second one – our effects. Also I added 3 new buttons. First – to switch to Blur effect, next 2 – increase / decrease blur level.

Step 2. CSS

Here are used CSS styles.

css/main.css

01 body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
02 .example{background:#FFF;width:730px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
03 h3 {
04     text-align:center;
05 }
06 .column1 {
07     float:left;
08     padding-right: 10px;
09     text-align:right;
10     width:185px;
11 }
12 .column2 {
13     float:left;
14     width:500px;
15     background-color:#888;
16     padding:10px;
17 }
18 input[type=button] {
19     margin:5px;
20 }

Step 3. JS

Now – most interesting – its inner functionality (HTML5 canvas script).

js/script.js

001 var canvas;
002 var context;
003 var iW = 0; // image width
004 var iH = 0; // image height
005 var p1 = 0.99;
006 var p2 = 0.99;
007 var p3 = 0.99;
008 var er = 0; // extra red
009 var eg = 0; // extra green
010 var eb = 0; // extra blue
011 var iBlurRate = 0;
012 var func = 'color'; // last used function
013 window.onload = function() {
014     // creating context for original image
015     canvasOrig = document.getElementById('orig');
016     contextOrig = canvasOrig.getContext('2d');
017     // draing original image
018     var imgObj = new Image();
019     imgObj.onload = function () {
020         iW = this.width;
021         iH = this.height;
022         contextOrig.drawImage(imgObj, 0, 0, iW, iH); // draw the image on the canvas
023     }
024     imgObj.src = 'images/01.jpg';
025     // creating testing context
026     canvas = document.getElementById('panel');
027     context = canvas.getContext('2d');
028 };
029 function Grayscale() {
030     func = 'grayscale'; // last used function
031     var imgd = contextOrig.getImageData(0, 0, iW, iH);
032     var data = imgd.data;
033     for (var i = 0, n = data.length; i < n; i += 4) {
034         var grayscale = data[i] * p1 + data[i+1] * p2 + data[i+2] * p3;
035         data[i]   = grayscale + er; // red
036         data[i+1] = grayscale + eg; // green
037         data[i+2] = grayscale + eb; // blue
038     }
039     context.putImageData(imgd, 0, 0);
040 }
041 function Color() {
042     func = 'color'; // last used function
043     var imgd = contextOrig.getImageData(0, 0, iW, iH);
044     var data = imgd.data;
045     for (var i = 0, n = data.length; i < n; i += 4) {
046         data[i]   = data[i]*p1+er; // red
047         data[i+1] = data[i+1]*p2+eg; // green
048         data[i+2] = data[i+2]*p3+eb; // blue
049     }
050     context.putImageData(imgd, 0, 0);
051 }
052 function Blur() {
053     func = 'blur'; // last used function
054     var imgd = contextOrig.getImageData(0, 0, iW, iH);
055     var data = imgd.data;
056     for (br = 0; br < iBlurRate; br += 1) {
057         for (var i = 0, n = data.length; i < n; i += 4) {
058             iMW = 4 * iW;
059             iSumOpacity = iSumRed = iSumGreen = iSumBlue = 0;
060             iCnt = 0;
061             // data of close pixels (from all 8 surrounding pixels)
062             aCloseData = [
063                 i - iMW - 4, i - iMW, i - iMW + 4, // top pixels
064                 i - 4, i + 4, // middle pixels
065                 i + iMW - 4, i + iMW, i + iMW + 4 // bottom pixels
066             ];
067             // calculating Sum value of all close pixels
068             for (e = 0; e < aCloseData.length; e += 1) {
069                 if (aCloseData[e] >= 0 && aCloseData[e] <= data.length - 3) {
070                     iSumOpacity += data[aCloseData[e]];
071                     iSumRed += data[aCloseData[e] + 1];
072                     iSumGreen += data[aCloseData[e] + 2];
073                     iSumBlue += data[aCloseData[e] + 3];
074                     iCnt += 1;
075                 }
076             }
077             // apply average values
078             data[i] = (iSumOpacity / iCnt)*p1+er;
079             data[i+1] = (iSumRed / iCnt)*p2+eg;
080             data[i+2] = (iSumGreen / iCnt)*p3+eb;
081             data[i+3] = (iSumBlue / iCnt);
082         }
083     }
084     context.putImageData(imgd, 0, 0);
085 }
086 function reset() {
087     switch(func) {
088         case 'grayscale': resetToGrayscale(); break;
089         case 'color': resetToColor(); break;
090         case 'blur': resetToBlur(); break;
091     }
092 }
093 function changeGrayValue(val) {
094     p1 += val;
095     p2 += val;
096     p3 += val;
097     switch(func) {
098         case 'grayscale': Grayscale(); break;
099         case 'color': Color(); break;
100         case 'blur': Blur(); break;
101     }
102 }
103 function changeColorValue(sobj, val) {
104     switch (sobj) {
105         case 'er': er += val; break;
106         case 'eg': eg += val; break;
107         case 'eb': eb += val; break;
108     }
109     switch(func) {
110         case 'grayscale': Grayscale(); break;
111         case 'color': Color(); break;
112         case 'blur': Blur(); break;
113     }
114 }
115 function changeBlurValue(val) {
116     iBlurRate += val;
117     if (iBlurRate <= 0) Color();
118     if (iBlurRate > 4) iBlurRate = 4;
119     Blur();
120 }
121 function resetToColor() {
122     p1 = 1;
123     p2 = 1;
124     p3 = 1;
125     er = eg = eb = 0;
126     iBlurRate = 0;
127     Color();
128 }
129 function resetToBlur() {
130     p1 = 1;
131     p2 = 1;
132     p3 = 1;
133     er = eg = eb = 0;
134     iBlurRate = 1;
135     Blur();
136 }
137 function resetToGrayscale() {
138     p1 = 0.3;
139     p2 = 0.59;
140     p3 = 0.11;
141     er = eg = eb = 0;
142     iBlurRate = 0;
143     Grayscale();
144 }

As you can notice – sources slightly changed. Now we have 2 canvas objects, so we will using ‘getImageData’ function only with first canvas with original image. Also I added new functions for Blur effect. So how I Blurring image? – commonly, I passing through all pixels of image, taking 8 surrounding pixels of each pixels, calculating average opacity, red/green/blue values of these 8 pixels, and then, apply that average calculated value to our enum pixel.

Live Demo

Conclusion

Not bad, isn’t it? Today we added new interesting effect to our application – Blur. I hope that in coming articles we will continue lessons for image processing. I will be glad to see your thanks and comments. Good luck!

Rate article
© 2026 Script Tutorials