This code displays a circle: I want to add a lens flare (halo effect as in PhotoShop) over this. How to do it ?

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'pink';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#f0505f';
context.stroke();

body {
  margin: 0px;
  padding: 0px;
}

<canvas id="myCanvas" width="578" height="200"></canvas>

This code displays a circle: I want to add a lens flare (halo effect as in PhotoShop) over this. How to do it ?

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'pink';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#f0505f';
context.stroke();

body {
  margin: 0px;
  padding: 0px;
}

<canvas id="myCanvas" width="578" height="200"></canvas>

• javascript
• html
• canvas

1 Answer 1

A lens flare effect overlays many smaller effects on top of your image to create the lens flare.

Here's a tutorial of which effects you will need for your lens-flare effect:

http://library.creativecow/articles/mylenium/lens_flare.php

And here's the html5 canvas techniques needed to create each effect.

I've been wanting to do a lens flare effect, but haven't had time to acplish it.

So give it a go...if you have difficulties just post a question and I'd be glad to help.

Good luck with your project!

These are radial gradient fills (with & without a blur)

Html5 canvas techniques needed:

• createRadialGradient
• shadowBlur

These are stars (thick and thin) with radial gradient fills & blur

Html5 canvas techniques needed:

• star path created with a regular polygon
• createRadialGradient
• shadowBlur

This is a radial gradient fill with a blur that has been "flattened" using Y-scaling

Html5 canvas techniques needed:

• createRadialGradient
• shadowBlur
• scale transform (scaling Y will "flatten" the circle into a sliver)

This is an arc

Html5 canvas techniques needed:

• arc path mand

This is an arc with a gradient that runs with the stroke

Html5 canvas techniques needed:

• arc path mand
• image slicing (example: Gradient Stroke Along Curve in Canvas)

This is a series of rectangles drawn along a circle

Html5 canvas techniques needed:

• fillRect
• trigonometry (calculate x/y points along a circle)
• trigonometry (extend the radius of a circle)