Blur Canvas
Here, we create a blur canvas using HTML, CSS and JS.
Project Folder Structure
Before we start coding we take a look at the project folder structure. We start by creating a folder called – “Blur Canvas” Inside this folder, we have 3 files. Create these files like below:
- index.html
- style.css
- script.js
HTML
We create blur canvas using HTML code. Copy the code below and paste it into your index.html file.
<div class="canvas-bg-image">
<div></div>
</div>
CSS
We create blur canvas using CSS code. Copy the code below and paste it into your style.css file.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: #222;
}
.canvas-bg-image {
overflow: hidden;
height: 100%;
width: 100%;
> div {
background: url("https://codewarrier.com/wp-content/uploads/2024/03/image-effect-3-scaled.jpg");
background-size: cover;
height: 100%;
width: 100%;
filter: blur(8px) brightness(0.8);
}
}
JS
Finally, we add functionality in blur canvas using JavaScript. Copy the code below and paste it into your script.js file.
let c, h, f, b, img, mouseX = null,
mouseY = null,
array = [],
startTime = 0,
over500msElapsed = true
$("body").mousemove((e) => {
mouseX = e.clientX
mouseY = e.clientY
startTime = Date.now()
over500msElapsed || onImageLoad()
})
$(window)
.on("blur mouseout", function() {
mouseX = mouseY = null
}).on("resize", function() {
c && c.parentNode && c.parentNode.removeChild(c)
setUpCanvases()
})
setUpCanvases()
function setUpCanvases() {
const bodyWidth = $("body").width()
const bodyHeight = $("body").height()
c = document.createElement("canvas")
c.width = bodyWidth
c.height = bodyHeight
c.style.position = "absolute"
c.style.top = 0
c.style.left = 0
$("body").append(c)
h = document.createElement("canvas")
h.width = bodyWidth
h.height = bodyHeight
// set up contexts
if (c.getContext && c.getContext("2d") && (f = c.getContext("2d"),
b = h.getContext("2d"), b.lineCap = "round", b.shadowColor = "#000", !img)) {
img = new Image
$(img).one("load", onImageLoad)
$(img).attr("src", "https://codewarrier.com/wp-content/uploads/2024/03/image-effect-3-scaled.jpg")
}
}
function onImageLoad() {
let currentTime = Date.now()
over500msElapsed = currentTime > startTime + 500 ? false : true
mouseX && over500msElapsed && array.unshift({
time: currentTime,
x: mouseX,
y: mouseY + $("body").scrollTop()
})
for (let i = 0; i < array.length; i++) {
if (currentTime - array[i].time > 1000) {
array.length = i
}
}
if (array.length > 0) {
requestAnimationFrame(onImageLoad)
}
b.clearRect(0, 0, h.width, h.height)
for (i = 1; i < array.length; i++) {
const thisItem = array[i]
const lastItem = array[i - 1]
const lineOpacity = Math.max(1 - (currentTime - thisItem.time) / 1000, 0)
b.strokeStyle = `rgba(0,0,0,${lineOpacity})`
b.lineWidth = 80
b.beginPath()
b.moveTo(lastItem.x, lastItem.y)
b.lineTo(thisItem.x, thisItem.y)
b.stroke()
}
let imageRatio1 = c.width
let imageRatio2 = c.width / img.naturalWidth *
img.naturalHeight
imageRatio2 < c.height && (imageRatio2 = c.height, imageRatio1 = c.height / img.naturalHeight * img.naturalWidth)
f.drawImage(img, 0, 0, imageRatio1, imageRatio2)
f.globalCompositeOperation = "destination-in"
f.drawImage(h, 0, 0)
f.globalCompositeOperation = "source-over"
}
CODEPEN
Watch Some Other Topics