I have this code:
function CrossTemplate(gridOptions, canvas) {
const config = {color: '#000000', gridSize: 4, gridPadding: 0, strokeStyle: "#00000"};
const bw = canvas.width;
const bh = canvas.width;
const p = 0;
const cw = bw + p * 2 + 1;
const ch = bh + p * 2 + 1;
const context = canvas.getContext('2d');
canvas.height = ch;
canvas.width = cw;
if (!context) throw Error('Canvas context error');
for (var x = 0; x <= bw; x += config.gridSize) {
context.moveTo(0.5 + x + p, p);
context.lineTo(0.5 + x + p, bh + p);
}
for (var x = 1; x <= bh; x += config.gridSize) {
context.moveTo(p, 0.5 + x + p);
context.lineTo(bw + p, 0.5 + x + p);
}
context.strokeStyle = config.strokeStyle;
context.stroke();
return canvas;
}
https://jsfiddle.net/k2mg8dxs/12/
I wonder, why I dont see pattern canvas, where I did mistake?
I use parent context:
const context2 = canvas2.getContext('2d');
context2.fillStyle = context.createPattern(canvas, 'repeat');
I moved the creation of the pattern canvas inside the function that you defined and then return the canvas in the end. I think it makes it more transparent what happens. I have a hard time reading your code, but this seams to work.
And then you also missed the fillRect() in the end.
function CrossTemplate(gridOptions) {
let canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
const config = {
color: '#000000',
gridSize: 4,
gridPadding: 0,
strokeStyle: "#00000"
};
const bw = canvas.width;
const bh = canvas.width;
const p = 0;
const cw = bw + p * 2 + 1;
const ch = bh + p * 2 + 1;
const context = canvas.getContext('2d');
canvas.height = ch;
canvas.width = cw;
if (!context) throw Error('Canvas context error');
for (var x = 0; x <= bw; x += config.gridSize) {
context.moveTo(0.5 + x + p, p);
context.lineTo(0.5 + x + p, bh + p);
}
for (var x = 1; x <= bh; x += config.gridSize) {
context.moveTo(p, 0.5 + x + p);
context.lineTo(bw + p, 0.5 + x + p);
}
context.strokeStyle = config.strokeStyle;
context.stroke();
return canvas;
}
const canvas2 = document.getElementById('canvas2');
canvas2.width = 1024;
canvas2.height = 1024;
let canvas = CrossTemplate({
lineWidth: 1,
b: 24,
k: -1,
strokeStyle: '#215cff',
lineCap: 'square'
});
const context = canvas.getContext('2d');
const context2 = canvas2.getContext('2d');
context2.fillStyle = context.createPattern(canvas, 'repeat');
context2.fillRect(0, 0, canvas2.width, canvas2.height);
#canvas {
width: 512px;
height: 512px;
}
<canvas id="canvas2"></canvas>
Related
I have two images locally. First image is a cup and another is a banner.
How do I warp and banner with the cup and then output a new file?
I've found the below function but how do I convert it to use in nodejs.
Wrap an image around a cylindrical object in HTML5 / JavaScript
function canvas3() {
var canvas = document.getElementById("canvas3");
var ctx = canvas.getContext("2d");
var productImg = new Image();
productImg.onload = function() {
var iw = productImg.width;
var ih = productImg.height;
canvas.width = iw;
canvas.height = ih;
ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
0, 0, iw, ih);
loadUpperIMage()
};
productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg"
function loadUpperIMage() {
var img = new Image();
img.src = "http://res.cloudinary.com/pussyhunter/image/upload/v1488184107/500_F_97150423_M13q2FeAUZxxIx6CaPixHupprmyiVVli_skh6fe.jpg"
img.onload = function() {
var iw = img.width;
var ih = img.height;
//alert(iw)
var xOffset = 102, //left padding
yOffset = 110; //top padding
var a = 75.0; //image width
var b = 10; //round ness
var scaleFactor = iw / (3 * a);
// draw vertical slices
for (var X = 0; X < iw; X += 1) {
var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
ctx.drawImage(img, X * scaleFactor, 0, iw / 1.5, ih, X + xOffset, y + yOffset, 1, 174);
}
};
}
};
You can use canvas package in node.js too.
https://www.npmjs.com/package/canvas
import {loadImage, createCanvas } from "canvas";
...
router.get("/test", async (req: Request, res: Response) => {
const myImg = await loadImage('https://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg');
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext("2d")
ctx.clearRect(0, 0, 500, 500)
const myImg2 = await loadImage('https://i.stack.imgur.com/NkKnV.png');
canvas.getContext("2d").drawImage(myImg,0,0,myImg.width, myImg.height);
// flat
// canvas.getContext("2d").drawImage(myImg2,myImg.width/2-30,myImg.height/2-30,60,60);
//rounded
draw(ctx, myImg2)
const buffer = canvas.toBuffer('image/jpeg');
// write a copy to the disk
//fs.writeFileSync("c:\\dev\\image.png", buffer);
res.write(buffer);
res.status(200);
res.end();
});
function draw(ctx, image) {
const iw = image.width;
const ih = image.height;
const xOffset = 102; //left padding
const yOffset = 110; //top padding
const a = 75.0; //image width
const b = 10; //round ness
const scaleFactor = iw / (4 * a);
// draw vertical slices
for (let X = 0; X < iw; X += 1) {
const y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
ctx.drawImage(image, X * scaleFactor, 0, iw / 9, ih, X + xOffset, y + yOffset, 1, 174);
}
}
And the result;
I am trying to draw a line chart with different colors for different parts of the charts.
I am having trouble figuring out how to draw individual fillStyle and strokeStyle
Attached code with comments
const canvas = document.getElementById('test');
const ctx = canvas.getContext('2d');
const width = canvas.width = 1000;
const height = canvas.height = 500;
ctx.fillStyle = 'blue';
function plotPoints() {
const pts = generatePoints(25);
pts.forEach((pt, index, pointArray) => {
drawCurvedLine(ctx, pt, index, pointArray)
});
ctx.stroke();
const maxY = Math.max.apply(null, pts.map(pt => pt.y));
ctx.lineTo(pts[pts.length - 1].x, maxY);
ctx.lineTo(pts[0].x, maxY);
// Area Color
ctx.fillStyle = 'rgba(255, 148, 136, .6)';
ctx.fill();
}
plotPoints();
function generatePoints(nbOfPoints) {
const pts = [];
for (let i = 0; i <= nbOfPoints; i++) {
pts.push({
x: i * (width / nbOfPoints),
y: Math.random() * height
});
}
return pts;
}
function drawCurvedLine(ctx, point, index, pointArray) {
if (typeof pointArray[index + 1] !== 'undefined') {
var x_mid = (point.x + pointArray[index + 1].x) / 2;
var y_mid = (point.y + pointArray[index + 1].y) / 2;
var cp_x1 = (x_mid + point.x) / 2;
var cp_x2 = (x_mid + pointArray[index + 1].x) / 2;
// Point fill color crimson
// Point stroke style blue for example
ctx.fillStyle = 'crimson';
ctx.strokeStyle = 'blue';
ctx.arc(point.x, point.y, 10, 2 * Math.PI, false);
// ctx.stroke();
// ctx.fill();
ctx.quadraticCurveTo(cp_x1, point.y, x_mid, y_mid);
ctx.quadraticCurveTo(cp_x2, pointArray[index + 1].y, pointArray[index + 1].x, pointArray[index + 1].y);
// Line stroke style salmon
ctx.strokeStyle = 'salmon';
ctx.lineWidth = 5;
}
}
<canvas id="test"></canvas>
Any help is much appreciated.
You need to use the ctx.beginPath(); when you are drawing to a canvas...
Here is your snippet with a different approach:
const canvas = document.getElementById('test');
const ctx = canvas.getContext('2d');
const width = canvas.width = 600;
const height = canvas.height = 250;
plotPoints();
function plotPoints() {
const pts = generatePoints(50);
ctx.strokeStyle = 'salmon';
ctx.fillStyle = 'rgba(255, 148, 136, .6)';
ctx.lineWidth = 5;
ctx.beginPath();
pts.forEach((pt, index, pointArray) => {
drawCurvedLine(pt, pointArray[index + 1])
});
ctx.fill();
ctx.stroke();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
for (i = 5; i < pts.length-5; i++) {
ctx.beginPath();
ctx.fillStyle = 'rgba(0,'+ pts[i].y +','+ pts[i].x/2 +')';
ctx.arc(pts[i].x, pts[i].y, 5, 2 * Math.PI, false)
ctx.stroke();
ctx.fill();
}
}
function generatePoints(nbOfPoints) {
const pts = [{x:0, y: height}];
for (let i = 0; i <= nbOfPoints; i++) {
pts.push({x: i * (width / nbOfPoints), y: Math.sin(i/2.6) * height/3 + 100});
}
pts.push({x:width, y: height});
return pts;
}
function drawCurvedLine(point, next) {
if (typeof next !== 'undefined') {
var x_mid = (point.x + next.x) / 2;
var y_mid = (point.y + next.y) / 2;
var cp_x1 = (x_mid + point.x) / 2;
var cp_x2 = (x_mid + next.x) / 2;
ctx.quadraticCurveTo(cp_x1, point.y, x_mid, y_mid);
ctx.quadraticCurveTo(cp_x2, next.y, next.x, next.y);
}
}
<canvas id="test"></canvas>
I have a canvas where I use "fillText" with a string, saying for example "stackoverflow". Then I read the imagedata of the canvas in order to pick out each pixel of that text.
I want to pick the following from the pixel: x position, y position and its color. Then I would like to loop over that array with those pixels so I can draw back the text pixel by pixel so I have full control of each pixel, and can for example animate them.
However, I dont get it as smooth as I want. Look at my attach image, and you see the difference between the top text and then the text I've plotted out using fillRect for each pixel. Any help on how to make the new text look like the "fillText" text does?
Thanks
UPDATE: Added my code
var _particles = [];
var _canvas, _ctx, _width, _height;
(function(){
init();
})();
function init(){
setupParticles(getTextCanvasData());
}
function getTextCanvasData(){
// var w = 300, h = 150, ratio = 2;
_canvas = document.getElementById("textCanvas");
// _canvas.width = w * ratio;
// _canvas.height = h * ratio;
// _canvas.style.width = w + "px";
// _canvas.style.height = h + "px";
_ctx = _canvas.getContext("2d");
_ctx.fillStyle = "rgb(0, 154, 253)";
// _ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
var str = "stackoverflow";
_ctx.font = "32px EB Garamond";
_ctx.fillText(str,0,23);
_width = _canvas.width;
_height = _canvas.height;
var data32 = new Uint32Array(_ctx.getImageData(0, 0, _width, _height).data.buffer);
var positions = [];
for(i = 0; i < data32.length; i++) {
if (data32[i] & 0xffff0000) {
positions.push({
x: (i % _width),
y: ((i / _width)|0),
});
}
}
return positions;
}
function setupParticles(positions){
var i = positions.length;
var particles = [];
while(i--){
var p = new Particle();
p.init(positions[i]);
_particles.push(p);
drawParticle(p);
}
}
function drawParticle(particle){
var x = particle.x;
var y = particle.y;
_ctx.beginPath();
_ctx.fillRect(x, y, 1, 1);
_ctx.fillStyle = 'green';
}
function Particle(){
this.init = function(pos){
this.x = pos.x;
this.y = pos.y + 30;
this.x0 = this.x;
this.y0 = this.y;
this.xDelta = 0;
this.yDelta = 0;
}
}
Here is an update to your code that reuses the alpha component of each pixel. There will still be some detail lost because we do not keep the antialiasing of the pixels (which in effect alters the actual color printed), but for this example the alpha is enough.
var _particles = [];
var _canvas, _ctx, _width, _height;
(function(){
init();
})();
function init(){
setupParticles(getTextCanvasData());
}
function getTextCanvasData(){
// var w = 300, h = 150, ratio = 2;
_canvas = document.getElementById("textCanvas");
// _canvas.width = w * ratio;
// _canvas.height = h * ratio;
// _canvas.style.width = w + "px";
// _canvas.style.height = h + "px";
_ctx = _canvas.getContext("2d");
_ctx.imageSmoothingEnabled= false;
_ctx.fillStyle = "rgb(0, 154, 253)";
// _ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
var str = "stackoverflow";
_ctx.font = "32px EB Garamond";
_ctx.fillText(str,0,23);
_width = _canvas.width;
_height = _canvas.height;
var pixels = _ctx.getImageData(0, 0, _width, _height).data;
var data32 = new Uint32Array(pixels.buffer);
var positions = [];
for(i = 0; i < data32.length; i++) {
if (data32[i] & 0xffff0000) {
positions.push({
x: (i % _width),
y: ((i / _width)|0),
a: pixels[i*4 + 3] / 255
});
}
}
return positions;
}
function setupParticles(positions){
var i = positions.length;
var particles = [];
while(i--){
var p = new Particle();
p.init(positions[i]);
_particles.push(p);
drawParticle(p);
}
}
function drawParticle(particle){
var x = particle.x;
var y = particle.y;
_ctx.beginPath();
_ctx.fillStyle = `rgba(0,128,0,${particle.alpha})`;
_ctx.fillRect(x, y, 1, 1);
}
function Particle(){
this.init = function(pos){
this.x = pos.x;
this.y = pos.y + 30;
this.x0 = this.x;
this.y0 = this.y;
this.xDelta = 0;
this.yDelta = 0;
this.alpha = pos.a;
}
}
<canvas id="textCanvas"></canvas>
I want to wrap image on cylindrical cup. I am using html5 and Java script for achieve this solution. I got some idea from this link: https://stackoverflow.com/questions/31424117/.
But i am not getting solution from this link.
I want to wrap remaining image behind the cup, Like mold the remaining part and add some button for rotation.
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var productImg = new Image();
productImg.onload = function () {
var iw = productImg.width;
var ih = productImg.height;
console.log("height");
canvas.width = iw;
canvas.height = ih;
ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height, 0, 0, iw, ih);
//start();
// outline
/*ctx.beginPath();
ctx.moveTo(88, 235.734375);
ctx.bezierCurveTo(88, 234.734375, 204, 298, 327, 234.734375);
ctx.stroke();*/
};
productImg.src = "https://d2z4fd79oscvvx.cloudfront.net/0018872_inspirational_teacher_mug.jpeg";
var img = new Image();
img.onload = start;
img.src = "http://blog.foreigners.cz/wp-content/uploads/2015/05/Make-new-friends.jpg";
var pointer = 0;
function start() {
var iw = img.width;
var ih = img.height;
//canvas.width = iw + 20;
//canvas.height = ih + 20;
var x1 = 125;
var y1 = 130;
var x2 = 180;
var y2 = 190;
var x3 = 405;
var y3 = 150;
// calc line equations slope & b (m,b)
var unitT = 1 / iw;
// draw vertical slices
for (var X = 0, t = 0; X < iw; X++, t += unitT) {
var xTop = (1 - t) * (1 - t) * x1 + 2 * (1 - t) * t * x2 + t * t * x3;
var yTop = (1 - t) * (1 - t) * y1 + 2 * (1 - t) * t * y2 + t * t * y3;
ctx.drawImage(img, X + pointer, 0, 1, ih, xTop, yTop, 0.85, ih - 600);
}
If i change the pointer value in above code, than remaining image
stretch.
var pointer = 100 ;
I want to wrap image on whole mug and rotate in left and right.
I've played around your plunkr for some time and came up with this:
http://plnkr.co/edit/83xAr99FjswWg0GHjDvJ?p=preview
function start() {
var iw = img.width;
var ih = img.height;
var xOffset = 125,
yOffset = 122;
var a = 122.0;
var b = 30.0;
var scaleFactor = iw / (2*a); //how many times original image is greater compared to our rendering area?
// draw vertical slices
for (var X = 0; X < iw; X+=1) {
var y = b/a * Math.sqrt(a*a - (X-a)*(X-a)); // ellipsis equation
ctx.drawImage(img, X * scaleFactor, 0, 6, ih, X + xOffset, y + yOffset, 1, ih - 605 + y/2);
}
}
I took this ellipsis equation http://www.mathopenref.com/coordgeneralellipse.html and turn it into the form where I can get Y-coordinate from related X-coordinate.
You can play with my plunkr even more to make the image more accurately cover the cup, but it is still far away from reality because this method is not considering different lightning features of the surface of the cup.
function canvas1() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var productImg = new Image();
productImg.onload = function() {
var iw = productImg.width;
var ih = productImg.height;
console.log("height");
canvas.width = iw;
canvas.height = ih;
ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
0, 0, iw, ih);
loadUpperIMage()
};
productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/c_scale,f_auto,h_350/left_handle_cup_i7ztfs.jpg"
function loadUpperIMage() {
var img = new Image();
img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif"
img.onload = function() {
var iw = img.width;
var ih = img.height;
var xOffset = 102, //left padding
yOffset = 110; //top padding
//alert(ih)
var a = 75.0; //image width
var b = 10; //round ness
var scaleFactor = iw / (4 * a);
// draw vertical slices
for (var X = 0; X < iw; X += 1) {
var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
ctx.drawImage(img, X * scaleFactor, 0, iw / 9, ih, X + xOffset, y + yOffset, 1, 174);
}
};
}
};
function canvas2() {
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
var productImg = new Image();
productImg.onload = function() {
var iw = productImg.width;
var ih = productImg.height;
console.log("height");
canvas.width = iw;
canvas.height = ih;
ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
0, 0, iw, ih);
loadUpperIMage()
};
productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/canter_handle_cup_xyxhdd.jpg"
function loadUpperIMage() {
var img = new Image();
img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif"
img.onload = function() {
var iw = img.width;
var ih = img.height;
// alert(iw)
var xOffset = 101, //left padding
yOffset = 110; //top padding
var a = 75.0; //image width
var b = 10; //round ness
var scaleFactor = iw / (4 * a);
// draw vertical slices
for (var X = 0; X < iw; X += 1) {
var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
ctx.drawImage(img, X * scaleFactor, 0, iw / 3, ih, X + xOffset, y + yOffset, 1, 174);
}
};
}
};
function canvas3() {
var canvas = document.getElementById("canvas3");
var ctx = canvas.getContext("2d");
var productImg = new Image();
productImg.onload = function() {
var iw = productImg.width;
var ih = productImg.height;
canvas.width = iw;
canvas.height = ih;
ctx.drawImage(productImg, 0, 0, productImg.width, productImg.height,
0, 0, iw, ih);
loadUpperIMage()
};
productImg.src = "http://res.cloudinary.com/pussyhunter/image/upload/h_350/right_handle_cup_dsdhr7.jpg"
function loadUpperIMage() {
var img = new Image();
img.src = "https://media1.giphy.com/media/j3uyvaaslUxNe/200_s.gif"
img.onload = function() {
var iw = img.width;
var ih = img.height;
//alert(iw)
var xOffset = 102, //left padding
yOffset = 110; //top padding
var a = 75.0; //image width
var b = 10; //round ness
var scaleFactor = iw / (3 * a);
// draw vertical slices
for (var X = 0; X < iw; X += 1) {
var y = b / a * Math.sqrt(a * a - (X - a) * (X - a)); // ellipsis equation
ctx.drawImage(img, X * scaleFactor, 0, iw / 1.5, ih, X + xOffset, y + yOffset, 1, 174);
}
};
}
};
setTimeout(function() {
canvas1()
}, 1000);
setTimeout(function() {
canvas2()
}, 2000);
setTimeout(function() {
canvas3()
}, 3000);
function updateItems(delta)
{
var $items = $('#group').children();
var $current = $items.filter('.current');
$current = $current.length ? $current : $items.first();
var index = $current.index() + delta;
// Range check the new index
index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
$current.removeClass('current');
$current = $items.eq(index).addClass('current');
// Hide/show the next/prev
$("#prev").toggle(!$current.is($items.first()));
$("#next").toggle(!$current.is($items.last()));
}
$("#next").click(function () {
updateItems(1);
});
$("#prev").click(function () {
updateItems(-1);
});
// Cause initial selection
updateItems(0);
#group div{
display: none;
}
#group div.current{
display: block;
}
#next, #prev{
width: 100px;
height 40px;
cursor:pointer;
color:red;
position:fixed;
}
#next{
float: right;
}
#prev{
float: left;
margin-left:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div id="next">next</div>
<div id="prev">prev</div>
<div id="group" >
<div>
<canvas id="canvas1"></canvas>
</div>
<div>
<canvas id="canvas2"></canvas>
</div>
<div>
<canvas id="canvas3"></canvas>
</div>
</div>
I made this (run snippet below)
var Canvas = document.getElementById('c');
var ctx = Canvas.getContext('2d');
var resize = function() {
Canvas.width = Canvas.clientWidth;
Canvas.height = Canvas.clientHeight;
};
window.addEventListener('resize', resize);
resize();
var elements = [];
var presets = {};
presets.shard = function (x, y, s, random, color) {
return {
x: x,
y: y,
draw: function(ctx, t) {
this.x += 0;
this.y += 0;
var posX = this.x + + Math.sin((50 + x + (t / 10)) / 100) * 5;
var posy = this.y + + Math.sin((55 + x + (t / 10)) / 100) * 7;
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(posX, posy);
ctx.lineTo(posX+random,posy+random);
ctx.lineTo(posX+random,posy+random);
ctx.lineTo(posX+0,posy+50);
ctx.closePath();
ctx.fill();
}
}
};
for(var x = 0; x < Canvas.width; x++) {
for(var y = 0; y < Canvas.height; y++) {
if(Math.round(Math.random() * 60000) == 1) {
var s = ((Math.random() * 5) + 1) / 10;
if(Math.round(Math.random()) == 1){
var random = Math.floor(Math.random() * 100) + 10;
var colorRanges = ['#8c8886', '#9c9995'];
var color = colorRanges[Math.floor(Math.random() * colorRanges.length)];
elements.push(presets.shard(x, y, s, random, color));
}
}
}
}
setInterval(function() {
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
var time = new Date().getTime();
for (var e in elements)
elements[e].draw(ctx, time);
}, 10);
<canvas id="c" width="1000" height="1000"\>
I just need to add one feature to be able to use it on the site I'm building it for. Some of the floating shards need to be blurred to give a sense of depth.
Can Canvas do this, and if so, how?
context.filter = 'blur(10px)';
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
I used this few months ago, maybe it could work for you as well :
var canvas = document.getElementById("heroCanvas");
var canvasContext = canvas.getContext("2d");
var canvasBackground = new Image();
canvasBackground.src = "image.jpg";
var drawBlur = function() {
// Store the width and height of the canvas for below
var w = canvas.width;
var h = canvas.height;
// This draws the image we just loaded to our canvas
canvasContext.drawImage(canvasBackground, 0, 0, w, h);
// This blurs the contents of the entire canvas
stackBlurCanvasRGBA("heroCanvas", 0, 0, w, h, 100);
}
canvasBackground.onload = function() {
drawBlur();
}
Here the source : http://zurb.com/playground/image-blur-texture