Develop Reference

How do I blur a particular area of an image in HTML?

The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/
Steps that I followed:
I found no way to blur a background image, so I inserted an image within a <div> with an id="background".
And then modified the CSS of it as:
#background{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.
Obviously, when I hover over it, the entire image gets clear.
But the goal is to clear the area where the mouse pointer overs at.
I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.
But I'm clueless on how to code it.

https://github.com/thdoan/magnify
A simple way would to use magnify to zoom over the already blurred image.
$(document).ready(function() {
$('.zoom').magnify();
});
img {
-webkit-filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>
<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">

Here is a pure JS solution that rely on clip-path and CSS variables, the idea is to duplicate the images to have one blurred and one not. Then we reveal the non-blurred one on the top:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
width:400px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:before {
filter:blur(5px) grayscale(60%);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/400/200?image=1069)">
</div>
With this solution you can easily do the oppsite if you want to blur a part of the image on hover:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
margin:50px;
width:200px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:after {
filter:blur(5px);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/200/200?image=1069)">
</div>

How to "dim" certain area in a webpage

I have a page which i need to dim a certain area (div) instead of the entire page. How can I achieve this?
I have googled some answer but all of them is about dimming the whole page. Below is the sample code that I got but it dimmed the entire page.
<div id="dimmer"></div>
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}

It covered the whole page because you set the width and height to 100%. If you were to make it 100px or 50%, that would work, but if you set it to 100%, it will cover 100% of the page.

.area-to-dim {
position: relative;
}
.dimmer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
HTML
<div class="area-to-dim">
<div class="dimmer"></div>
</div>

Two ways, one really simple but I'm not 100% sure this is what you wanted.
First way, use CSS
.genericClassGivenToDivs, #idOfDiv {
background:#fff;
}
/* on mouse over, change the background colour */
.genericClassGivenToDivs:hover, #idOfDiv:hover {
background:#aaa;
}
The second way is more complex. Basically, reposition a div using javascript on mouse over. This requires some CSS and javascript. The following could be a lot cleaner with some work.
<html>
<head>
<style>
body {
margin:1em;
background:#ddd;
}
#contain {
margin:auto;
width:100%;
max-width:720px;
text-align:center;
}
#row1, #row2, #row3 {
width:100%;
height:48px;
line-height:48px;
color:#000;
background:#fff;
}
#row2 {
background:#eee;
}
#dim {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
</style>
</head>
<body>
<div id="contain">
<div id="row1">Row 1</div>
<div id="row2">Row 2</div>
<div id="row3">Row 3</div>
</div>
<div id="dim"></div>
<script>
var dimEl = document.getElementById('dim');
function over() {
//console.log('over:['+ this.id +']');
dimEl.style.top = this.offsetTop +'px';
dimEl.style.left = this.offsetLeft +'px';
dimEl.style.height = this.offsetHeight +'px';
dimEl.style.width = this.offsetWidth +'px';
dimEl.style.display = 'block';
}
window.onload = function() {
var list = ['row1', 'row2', 'row3'];
var e;
for(x in list) {
e = document.getElementById(list[x]);
if (e) {
e.onmouseover = over;
}
}
}
</script>
</body>
</html>

Not entirely sure what "dimming a certain area" means, but I recently created a solution that might be applicable in some extent.
I had a div with a background image and some overlaid text, and the background (but not the text) should darken slightly on mouse over.
I solved it by having two containers and a textfield, so that the outermost div had the background image, the inner div expanded to 100% height and width and had a transparent black solid-color background, and then there was some text in that div.
Then, simply, on hover, I change the inner div background-color from rgba(0, 0, 0, 0) to rgba(0, 0, 0, .3), dimming the background image.
If this sounds applicable, see this jsFiddle

Why the display is none?
Check this?
#dimmer {
background: #111;
top: 0;
left: 0;
width: 100px;
height: 100px;
z-index: 9999;
/* may not be necessary */
}
#dimmer:hover {
background: #000;
opacity: 0.5;
transition: opacity 1s ease;
cursor: pointer;
}
<div id="dimmer">ok</div>

On mouseover overlay image onto canvas

https://jsfiddle.net/c309a2wo/
html
<canvas id="myCanvas" width="200" height="200"></canvas>
javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0,255,255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "rgb(200,0,0)";
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2);
ctx.fill();
I would like to overlay an image("close_icon.png") onto a canvas in the top right corner when the mouse hovers over the canvas, and is removed again when the mouse leaves the canvas.
Jquery is available, though I couldn't find the option to add it in jsfiddle.
Visualisation:
Is there an easy way to accomplish this? Brownie points if the image can fade-in and out.

The basic idea is to wrap your canvas in a container element, then add an image in the container that is only shown on :hover.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0,255,255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "rgb(200,0,0)";
ctx.arc(canvas.width/2, canvas.height/2, 50, 0, Math.PI*2);
ctx.fill();
div {
position: relative;
display: inline-block;
}
canvas {
position: relative;
z-index: -1;
}
img {
position: absolute;
top: 4%;
right: 4%;
opacity: 0;
z-index: 2;
-webkit-transition: opacity 0.4s linear;
transition: opacity 0.4s linear;
}
div:hover img {
opacity: 1;
}
<div>
<canvas id="myCanvas" width="200" height="200"></canvas>
<img src="http://placehold.it/30x30">
</div>
Here'a working JSFiddle.

Wrap canvas it in outer container that has position, then you can position the icon wherever you want relative to the outer wrapper
HTML
<div id="canvas-wrap">
<span id="canvas-icon"></span>
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
CSS
#canvas-wrap{
position:relative;
width:200px; height:200px
}
#canvas-icon{
background:yellow;
width:32px;
height:32px;
position:absolute;
top:10px;
right:10px;
z-index:10;
display:none
}
#canvas-wrap:hover #canvas-icon{
display:block
}
DEMO

You may add the <span class="cross"> using .hover:
$("#myCancas").hover(function(){$( this ).append( $( "<span class="cross"></span>" ) );});
and then style it, using CSS:
span.cross{
display: block;
width: 10px;
height: 10px;
background-image: url( path/to/cross/jpg);
}

HTML5 Canvas shape from circle to triangle

I've been looking around and I can't seem to find a clear way in which I can animate a shape to change from a circle to a triangle or to a rectangle or the other way around. I would assume that I could somehow store the shape and change its attributes in order to convert it.
Basically what I am asking is, how can I draw a circle and then animate it to a triangle on the click of a button? Is that possible with canvas shapes?
Thanks!

Here's one approach you can use to animate a circle to-and-from any regular polygon.
Create your triangle (or any regular polygon) using quadratic curves for each side.
That way you can animate the quadratic curve's control point to control the "roundness" of your polygon.
If the control point is on the polygon line, then the curve has zero roundness and the result is your polygon.
If the control point is appropriately outside the polygon line, then the curve approximates the roundness of a circle and the result is your polygon looks like a circle.
To "morph" between circle-polygon, you just animate the control point of the curve.
I use "approximates" to describe the circle because quadratic curves can only approximate a circle. If you want an even better circle, you can refactor my code to use cubic Bezier curves instead of quadratic curves.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/NMJ58/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// change sideCount to the # of poly sides desired
//
var sideCount=3;
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth=2;
ctx.fillStyle=randomColor();
var PI2=Math.PI*2;
var cx=150;
var cy=150;
var radius=100;
var xx=function(a){return(cx+radius*Math.cos(a));}
var yy=function(a){return(cy+radius*Math.sin(a));}
var lerp=function(a,b,x){ return(a+x*(b-a)); }
var sides=[];
for(var i=0;i<sideCount;i++){
sides.push(makeSide(i,sideCount));
}
var percent=0;
var percentDirection=0.50;
$("#toShape").click(function(){
percentDirection=-0.50;
})
$("#toCircle").click(function(){
percentDirection=0.50;
})
animate();
// functions
function animate(){
requestAnimationFrame(animate);
drawSides(percent);
percent+=percentDirection;
if(percent>100){percent=100;}
if(percent<0){percent=0;}
}
function drawSides(pct,color){
ctx.clearRect(0,0,canvas.width,canvas.height);
if(pct==100){
ctx.beginPath();
ctx.arc(cx,cy,radius,0,PI2);
ctx.closePath();
ctx.fill();
}else{
ctx.beginPath();
ctx.moveTo(sides[0].x0,sides[0].y0);
for(var i=0;i<sideCount;i++){
var side=sides[i];
var cpx=lerp(side.midX,side.cpX,pct/100);
var cpy=lerp(side.midY,side.cpY,pct/100);
ctx.quadraticCurveTo(cpx,cpy,side.x2,side.y2);
}
ctx.fill();
}
}
function makeSide(n,sideCount){
var sweep=PI2/sideCount;
var sAngle=sweep*(n-1);
var eAngle=sweep*n;
var x0=xx(sAngle);
var y0=yy(sAngle);
var x1=xx((eAngle+sAngle)/2);
var y1=yy((eAngle+sAngle)/2);
var x2=xx(eAngle);
var y2=yy(eAngle);
var dx=x2-x1;
var dy=y2-y1;
var a=Math.atan2(dy,dx);
var midX=lerp(x0,x2,0.50);
var midY=lerp(y0,y2,0.50);
var cpX=2*x1-x0/2-x2/2;
var cpY=2*y1-y0/2-y2/2;
return({
x0:x0, y0:y0,
x2:x2, y2:y2,
midX:midX, midY:midY,
cpX:cpX, cpY:cpY,
color:randomColor()
});
}
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="toShape">Animate to Shape</button>
<button id="toCircle">Animate to Circle</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

You might want to use Raphael (https://dmitrybaranovskiy.github.io/raphael/) or a similar library to take care of this for you. The raphael site contains many examples similar to the case you describe.

It is hard to understand your exact aim and what kind of animation you need between shapes as you don't specify animation steps/states. But you could take a look at CSS3 transitions.
I made a few in the following demo that illustrate how you can simulate "shape morphing" (is this the corect term?) if that is what you are trying to do :
DEMO (click on the circles to animate them)
For the circle to rectangle, the transition is pretty easy to achieve, you just need to animate border-radius :
CSS :
#rec {
float:left;
width:200px;
height:200px;
background:gold;
border-radius:50%;
-webkit-transition: border-radius 1s, width 1s;
cursor:pointer;
}
#rec.animate {
border-radius:0%;
width:300px;
}
For the circle to triangle, the shape transition is a bit harder to achieve, the shape morphing isn't perfect and needs improvement but you can get the idea.
The circle and the triangle are set with pseudo elements and animations display one or the other with 2 different transitions :
CSS :
/*CIRCLE TO TRIANGLE 1 */
#tr1{
float:right;
position:relative;
cursor:pointer;
width:200px;
height:200px;
}
#tr1:before, #tr1:after{
content:'';
position:absolute;
}
#tr1:before{
top:0; left:0;
background:gold;
border-radius:50%;
width:100%;
height:100%;
-webkit-transition: width 1s, height 1s, left 1s, top 1s;
}
#tr1:after{
left:50%;
top:50%;
border-left:0px solid transparent;
border-right:0px solid transparent;
border-bottom:0px solid gold;
-webkit-transition: border-left 1s, border-right 1s, border-bottom 1s,left 1s, top 1s;
}
#tr1.animate:before{
width:0;
height:0;
top:50%; left:50%;
}
#tr1.animate:after{
top:0; left:0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:200px solid gold;
}
/*CIRCLE TO TRIANGLE 2 */
#tr2{
float:right;
position:relative;
cursor:pointer;
width:200px;
height:200px;
}
#tr2:before, #tr2:after{
content:'';
position:absolute;
}
#tr2:before{
top:0; left:0;
background:gold;
border-radius:50%;
width:100%;
height:100%;
-webkit-transition: width 1s, height 1s, left 1s, top 1s;
}
#tr2:after{
left:20px;
top:0;
border-left:80px solid transparent;
border-right:80px solid transparent;
border-bottom:160px solid gold;
-webkit-transition: border-left 1s, border-right 1s, border-bottom 1s,left 1s, top 1s;
z-index:-1;
}
#tr2.animate:before{
width:0;
height:0;
top:50%; left:50%;
}
#tr2.animate:after{
top:0; left:0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:200px solid gold;
}

( I will award #rje because he got me in the right direction and after all the effort I realized that my question wasn't detailed enough with the specifics of my issue ).
First I will explain what I was actually looking for: Basically when creating a "shape" in a canvas context it's pretty easy to use that as a mask, by mask I mean, let's say you draw a circle in the middle of the canvas which remains transparent but the canvas is filled with a certain color.
Using raphael js directly is kind of strange to do this until you get the hang of it because it's actually svg and there are different rules. You have to draw a outer path which will match the paper ( the raphael "canvas" ) and an inner path which will remain transparent. The challenge for me was to make it also responsive But I managed to do it after all using something like this
var tw; // canvas width
var th; // canvas height
var tr; // radius of circle, in my case calculated dynamically smth like (th - 20) / 2
var outerpath = "M0,0L" + tw + ",0L" + tw + "," + th + "L0," + th + "L0,0z";
var innerpath = "M" + (tw/2) + "," + (th/2 - tr) + "A" + tr + "," + tr + " 0 1,0 " + (tw/2 + 0.1) + "," + (th/2 - tr) + "z";
var path = outerpath + innerpath;
var mask = paper.path(path).attr({'stroke': 0, 'fill' : '#ccc', 'fill-opacity' : 0.9});
The great thing about this is that using Raphael you can animate them and also use for example innerpath for creating another shape and use another color to fill that. Amazing.
Thanks everybody.

how to set the absolute position div center align

I want to show the text text masking effect with animation
Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/
I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ *BUT aligned Center*
Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.
Code: HTML
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<span id="red">Waiting for the task!</span>
</div>
CSS
#mainbox {
width:600px;
text-align:center;
}
#black {
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
console.log(red.style.width);
if (red.style.width == "290px") clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);
Let me know if you need any other information.
Please suggest.

Check this fiddle
By centering the div itself, and positioning the red according to that, you'll ensure they line up.
#mainbox {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
#red {
left: 0;
}

To run it again and again change like this:
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "290px")
{
red.style.width = "0px"; // here i have changed
}
red.style.width = parseInt(red.style.width,10)+1 +"px";},50);
Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/

I altered your code slightly, you almost had it
http://codepen.io/nighrage/pen/EAmeF/

<div id="mainbox">
<span id="black">Waiting for the task!</span>
<div id="red">Waiting for the task!</div>
</div>
#red {
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
margin: 0 auto;
margin-top: -37px;
}
change the second span for a div