Creating luminous patterns on a blank page

Question

Creating luminous patterns on a blank page

Hello, I am experimenting with drawing lights in a canvas similar to this:

<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "rgba(0,0,0,0.75)";
ctx.fillRect(0,0,300,300);

ctx.clearRect(0,0,300,300);

var grd = ctx.createRadialGradient(150,150,0,150,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,300);

ctx.clearRect(300,0,600,300);

var grd = ctx.createRadialGradient(450,150,0,450,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(300,0,600,300);

</script>

The issue arises when the lights overlap

<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "rgba(0,0,0,0.75)";
ctx.fillRect(0,0,300,300);

ctx.clearRect(0,0,300,300);

var grd = ctx.createRadialGradient(150,150,0,150,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,300);

ctx.clearRect(200,0,500,300);

var grd = ctx.createRadialGradient(350,150,0,350,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(200,0,500,300);

</script>

I want the lights to merge without overlapping and also require an image visible under the canvas. How can I achieve this?

Here is the desired effect

I have utilized two canvases, one for the background scenery and another above for the lights.

Although close to my desired outcome, it seems a bit dark where the lights intersect, there is insufficient brightness at the center of each light, giving more of a white glow rather than yellow. Review the existing code here

Thank you

javascript canvas

Answer 1

Answer №1

If you're aiming to blend those two gradients together, here are a few recommendations:

Avoid using the clearRect() method.
Adjust the color stops in the gradient code so that the second stop has a 0 alpha value. This will create a smoother fade effect towards the edges of the circle. Overlapping circles work best when they have fading edges.
Consider using arcs instead of fillRect().

Take a look at this example: https://jsfiddle.net/fL4xffnq/3/. While I didn't maintain the original colors, it should give you a clear direction on how to proceed.

Answer 2

If you're aiming to blend those two gradients together, here are a few recommendations:

Avoid using the clearRect() method.
Adjust the color stops in the gradient code so that the second stop has a 0 alpha value. This will create a smoother fade effect towards the edges of the circle. Overlapping circles work best when they have fading edges.
Consider using arcs instead of fillRect().

Take a look at this example: https://jsfiddle.net/fL4xffnq/3/. While I didn't maintain the original colors, it should give you a clear direction on how to proceed.

Answer 3

Answer №2

jsFiddle : https://jsfiddle.net/UniqueCoder/qwerty123/

coding in javascript

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext("2d");

let image = new Image();
image.src = "http://images4.examplesite.com/image/photos/abcdefg.jpg";

image.onload = function () {
    ctx.drawImage(image, 0, 0, 500, 400);

    let gradient1 = ctx.createRadialGradient(150, 150, 0, 0, 150, 200);
    gradient1.addColorStop(0, "rgba(255,255,0,1)");
    gradient1.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.fillStyle = gradient1;
    ctx.arc(150, 150, 200, 0, Math.PI * 2, false)
    ctx.fill();

    let gradient2 = ctx.createRadialGradient(350, 150, 0, 350, 150, 200);
    gradient2.addColorStop(0, "rgba(255,255,0,1)");
    gradient2.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.fillStyle = gradient2;
    ctx.arc(350, 150, 200, 0, Math.PI * 2, false)
    ctx.fill();
};

Answer 4

jsFiddle : https://jsfiddle.net/UniqueCoder/qwerty123/

coding in javascript

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext("2d");

let image = new Image();
image.src = "http://images4.examplesite.com/image/photos/abcdefg.jpg";

image.onload = function () {
    ctx.drawImage(image, 0, 0, 500, 400);

    let gradient1 = ctx.createRadialGradient(150, 150, 0, 0, 150, 200);
    gradient1.addColorStop(0, "rgba(255,255,0,1)");
    gradient1.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.fillStyle = gradient1;
    ctx.arc(150, 150, 200, 0, Math.PI * 2, false)
    ctx.fill();

    let gradient2 = ctx.createRadialGradient(350, 150, 0, 350, 150, 200);
    gradient2.addColorStop(0, "rgba(255,255,0,1)");
    gradient2.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.fillStyle = gradient2;
    ctx.arc(350, 150, 200, 0, Math.PI * 2, false)
    ctx.fill();
};

Answer 5

Answer №3

Enhancing @nisargjhaveri's response by incorporating the setting

ctx.globalCompositeOperation = "lighter"

produces a visually pleasing effect.

function drawBackground() {
  var can = document.getElementById('background');
  var ctx = can.getContext('2d');
  var grd = ctx.createLinearGradient(0, 0, 0, 150);
  grd.addColorStop(0, "rgba(0,255,255,1)");
  grd.addColorStop(1, "rgba(30,100,200,1)");
  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, 500, 150);
  var grd = ctx.createLinearGradient(0, 150, 0, 300);
  grd.addColorStop(0, "rgba(15,75,25,1)");
  grd.addColorStop(1, "rgba(30,150,50,1)");
  ctx.fillStyle = grd;
  ctx.fillRect(0, 150, 500, 300);
}

drawBackground();

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var bg = document.getElementById("background");

var x1 = 150;
var y1 = 150;

var x2 = 350;
var y2 = 150;

var step1 = {
  x: 1,
  y: 1
};
var step2 = {
  x: -1,
  y: 1
};

function loop() {
  ctx.save();
  ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.clearRect(0, 0, 500, 300);

  // Creating a gradient for the circles

  // Circle one
  var grd = ctx.createRadialGradient(x1, y1, 0, x1, y1, 150);
  grd.addColorStop(.75, "rgba(255,255,0,1)");
  grd.addColorStop(1, "rgba(255,255,0,0)");
  ctx.beginPath();
  ctx.fillStyle = grd;
  ctx.arc(x1, y1, 150, 0, Math.PI * 2, false)
  ctx.fill();

  // Circle two
  var grd = ctx.createRadialGradient(x2, y2, 0, x2, y2, 150);
  grd.addColorStop(.75, "rgba(255,255,255,1)");
  grd.addColorStop(1, "rgba(255,255,255,0)");
  ctx.beginPath();
  ctx.fillStyle = grd;
  ctx.arc(x2, y2, 150, 0, Math.PI * 2, false)
  ctx.fill();

  ctx.globalCompositeOperation = "source-atop";
  ctx.drawImage(bg, 0, 0, bg.width, bg.height);

  ctx.globalCompositeOperation = "destination-atop"
  ctx.fillStyle = "rgba(63,63,63,1)";
  ctx.fillRect(0, 0, c.width, c.height);

  ctx.restore();


  step1.x = x1 > c.width ? -1 : x1 < 0 ? 1 : step1.x;
  step1.y = y1 > c.height ? -1 : y1 < 0 ? 1 : step1.y;
  step2.x = x2 > c.width ? -1 : x2 < 0 ? 1 : step2.x;
  step2.y = y2 > c.height ? -1 : y2 < 0 ? 1 : step2.y;
  x1 += step1.x;
  y1 += step1.y;
  x2 += step2.x;
  y2 += step2.y;


  setTimeout(loop, 1000 / 60);
}

loop()

<canvas id="background" width="500" height="300" style='display:none'></canvas>
<canvas id="myCanvas" width="500" height="300"></canvas>

Answer 6

Enhancing @nisargjhaveri's response by incorporating the setting

ctx.globalCompositeOperation = "lighter"

produces a visually pleasing effect.

function drawBackground() {
  var can = document.getElementById('background');
  var ctx = can.getContext('2d');
  var grd = ctx.createLinearGradient(0, 0, 0, 150);
  grd.addColorStop(0, "rgba(0,255,255,1)");
  grd.addColorStop(1, "rgba(30,100,200,1)");
  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, 500, 150);
  var grd = ctx.createLinearGradient(0, 150, 0, 300);
  grd.addColorStop(0, "rgba(15,75,25,1)");
  grd.addColorStop(1, "rgba(30,150,50,1)");
  ctx.fillStyle = grd;
  ctx.fillRect(0, 150, 500, 300);
}

drawBackground();

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var bg = document.getElementById("background");

var x1 = 150;
var y1 = 150;

var x2 = 350;
var y2 = 150;

var step1 = {
  x: 1,
  y: 1
};
var step2 = {
  x: -1,
  y: 1
};

function loop() {
  ctx.save();
  ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.clearRect(0, 0, 500, 300);

  // Creating a gradient for the circles

  // Circle one
  var grd = ctx.createRadialGradient(x1, y1, 0, x1, y1, 150);
  grd.addColorStop(.75, "rgba(255,255,0,1)");
  grd.addColorStop(1, "rgba(255,255,0,0)");
  ctx.beginPath();
  ctx.fillStyle = grd;
  ctx.arc(x1, y1, 150, 0, Math.PI * 2, false)
  ctx.fill();

  // Circle two
  var grd = ctx.createRadialGradient(x2, y2, 0, x2, y2, 150);
  grd.addColorStop(.75, "rgba(255,255,255,1)");
  grd.addColorStop(1, "rgba(255,255,255,0)");
  ctx.beginPath();
  ctx.fillStyle = grd;
  ctx.arc(x2, y2, 150, 0, Math.PI * 2, false)
  ctx.fill();

  ctx.globalCompositeOperation = "source-atop";
  ctx.drawImage(bg, 0, 0, bg.width, bg.height);

  ctx.globalCompositeOperation = "destination-atop"
  ctx.fillStyle = "rgba(63,63,63,1)";
  ctx.fillRect(0, 0, c.width, c.height);

  ctx.restore();


  step1.x = x1 > c.width ? -1 : x1 < 0 ? 1 : step1.x;
  step1.y = y1 > c.height ? -1 : y1 < 0 ? 1 : step1.y;
  step2.x = x2 > c.width ? -1 : x2 < 0 ? 1 : step2.x;
  step2.y = y2 > c.height ? -1 : y2 < 0 ? 1 : step2.y;
  x1 += step1.x;
  y1 += step1.y;
  x2 += step2.x;
  y2 += step2.y;


  setTimeout(loop, 1000 / 60);
}

loop()

<canvas id="background" width="500" height="300" style='display:none'></canvas>
<canvas id="myCanvas" width="500" height="300"></canvas>

Creating luminous patterns on a blank page

Answer №1

Answer №2

Answer №3

Similar questions

Are you interested in monitoring the website's past activity?

Upgrade button-group to dropdown on small screens using Bootstrap 4

angular.js:13920 Alert: [ngRepeat:dupes] Multiple occurrences in a repeater

Mastering the alignment of Material-UI Menu items

obtain the $http service and make a request

How to easily toggle multiple elements using jQuery

Explore our collection of videos featuring exclusive content on our video gallery. Please note

Definition of a class in Typescript when used as a property of an object

What is the correct way to execute a POST request?

How do you populate a dropdownlistfor in ASP.NET MVC after a form

Error encountered: Uncaught SyntaxError - An unexpected token '<' was found while matching all routes within the Next.js middleware

Detecting the click area within a window using JavaScript to automatically close an element

Error: A reference to an undefined alertbox with a value extracted from a list was not caught

Issue with PHP functionality not functioning properly

Best approach for retrieving and adding a large number of images when dealing with slower connections

When attempting to modify an object that was initialized outside of a function, I am unable to change its value, or sometimes the function may not run at all. This

Having difficulty including the Column Name in the Jqgrid footer for sum calculation

Incorporate a .php webpage into a div using Ajax and Javascript

Unable to display JSON results in a tabular format

Struggles with handling asynchronous events in Angular