CODEWITHSUNDEEP
htmlgeometryrounding
Jose Ramon
Jose Ramon

Reputation: 5444

Create soft round circles HTML5

I created circles using HTML5 Canvas. I want them to look like the soft, round brushes done with Photoshop. In this code, I can only create the circles with specific opacity:

 function drawClusters(ctx) {

var startPoint = (Math.PI/180)*0;
var endPoint = (Math.PI/180)*360;

ctx.beginPath();
ctx.arc(30,30,10,startPoint,endPoint,true); // x, y, r
ctx.fillStyle = "rgb(255,255,204)";
ctx.globalAlpha = 0.5;

ctx.fill();
ctx.closePath();
}

How is it possible to achieve the soft round effect? Something like the following image: enter image description here

Upvotes: 1

Views: 674

Answers (2)

ViliusL
ViliusL

Reputation: 4715

http://jsfiddle.net/pr9r7/2/ - v2, fixed overlaping issue.

function my_circle(ctx, x, y, size, color1, color2){
    var color1_rgb = hex2rgb(color1);
    var color2_rgb = hex2rgb(color2);
    var radgrad = ctx.createRadialGradient(
        x, y, size*0,
        x, y, size);
    radgrad.addColorStop(0, "rgba("+color1_rgb.r+", "+color1_rgb.g+", "+color1_rgb.b+", 1)");
    radgrad.addColorStop(1, "rgba("+color2_rgb.r+", "+color2_rgb.g+", "+color2_rgb.b+", 0)");
    ctx.fillStyle = radgrad;
    ctx.fillRect(x-size,y-size,size*2,size*2);
    }

Upvotes: 3

tessi
tessi

Reputation: 13574

This is probably not the answer (because it does not use canvas, but plain HTML and CSS), however your question made me play a little :)

http://jsfiddle.net/n5axu/

A DIV can be styled with the box-shadow css property to get similar circles.

enter image description here

HTML

<div class="circle white"></div>

CSS

.circle {
  height: 0;
  width: 0;
  box-shadow: 0 0 70px 60px;
  position: fixed;
}
.circle.white  { color: white; }
body { background-color: black; }

Upvotes: 3

Related Questions