Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

Question

Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

I am curious about how to achieve a scribble effect that self-erases, similar to what is seen on this website:

Example:

Thank you!

I have come across some similar scripts, but I am struggling to understand how to make the scribble disappear after a few lines.

Here is an example of what I mean: https://jsfiddle.net/loktar/dQppK/23/

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    lineThickness = 1;

canvas.width = canvas.height = 600;
ctx.fillRect(0, 0, 600, 600);

canvas.onmousedown = function(e) {
    painting = true;
    ctx.fillStyle = "#ffffff";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmouseup = function(e){
    painting = false;
}

canvas.onmousemove = function(e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        // find all points between        
        var x1 = mouseX,
            x2 = lastX,
            y1 = mouseY,
            y2 = lastY;


        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
        if (steep){
            var x = x1;
            x1 = y1;
            y1 = x;

            var y = y2;
            y2 = x2;
            x2 = y;
        }
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;

            var y = y1;
            y1 = y2;
            y2 = y;
        }

        var dx = x2 - x1,
            dy = Math.abs(y2 - y1),
            error = 0,
            de = dy / dx,
            yStep = -1,
            y = y1;
        
        if (y1 < y2) {
            yStep = 1;
        }
       
        lineThickness = 5 - Math.sqrt((x2 - x1) *(x2-x1) + (y2 - y1) * (y2-y1))/10;
        if(lineThickness < 1){
            lineThickness = 1;   
        }

        for (var x = x1; x < x2; x++) {
            if (steep) {
                ctx.fillRect(y, x, lineThickness , lineThickness );
            } else {
                ctx.fillRect(x, y, lineThickness , lineThickness );
            }
            
            error += de;
            if (error >= 0.5) {
                y += yStep;
                error -= 1.0;
            }
        }



        lastX = mouseX;
        lastY = mouseY;

    }
}

<canvas id="canvas"></canvas>

javascript html css

Answer 1

Answer №1

To master this technique, it's crucial to keep track of a list of points. The event handlers will constantly update this list, while a render function takes care of displaying everything on the screen.

Take a look at the code snippet below.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

const TOTAL_ALLOWED_POINTS = 10;
let CANVAS_WIDTH;
let CANVAS_HEIGHT;
let context;

const pointList = [];

function setupCanvas() {
  const canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');

  CANVAS_WIDTH = canvas.width;
  CANVAS_HEIGHT = canvas.height;

  canvas.addEventListener('mousemove', (e) => {
    const cursorPosition = new Point(e.offsetX, e.offsetY);

    // Include this point in the list for rendering.
    pointList.push(cursorPosition);

    // Since the list of points should remain finite,
    // remove the oldest point (FIFO).
    if (pointList.length > TOTAL_ALLOWED_POINTS - 1) {
      pointList.shift();
    }
  });

  // Start rendering.
  requestAnimationFrame(renderPoints);
}

function renderPoints() {
  if (!context) return;

  context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

  context.beginPath();
  pointList.forEach((point, index) => {
    if (index === 0) return;

    const previousPoint = pointList[index - 1];

    context.moveTo(previousPoint.x, previousPoint.y);
    context.lineTo(point.x, point.y);
  });
  context.closePath();
  context.stroke();

  requestAnimationFrame(renderPoints);
}

setupCanvas();

HTML5 Canvas

The variable TOTAL_ALLOWED_POINTS determines how many points are visible on the screen simultaneously. Meanwhile, pointList holds the actual points for rendering.

In the mousemove event handler, we capture mouse coordinates and manage the number of points to maintain visibility. If the limit is reached, the earliest point is removed, creating the trailing effect you observe.

Within the render function renderPoints, we clear the canvas before drawing lines between the points from the updated list.

Note that I utilize requestAnimationFrame to continuously call renderPoints, ensuring continual updates regardless of point list changes. Alternatively, you can invoke renderPoints directly within the event handler.

Answer 2

To master this technique, it's crucial to keep track of a list of points. The event handlers will constantly update this list, while a render function takes care of displaying everything on the screen.

Take a look at the code snippet below.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

const TOTAL_ALLOWED_POINTS = 10;
let CANVAS_WIDTH;
let CANVAS_HEIGHT;
let context;

const pointList = [];

function setupCanvas() {
  const canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');

  CANVAS_WIDTH = canvas.width;
  CANVAS_HEIGHT = canvas.height;

  canvas.addEventListener('mousemove', (e) => {
    const cursorPosition = new Point(e.offsetX, e.offsetY);

    // Include this point in the list for rendering.
    pointList.push(cursorPosition);

    // Since the list of points should remain finite,
    // remove the oldest point (FIFO).
    if (pointList.length > TOTAL_ALLOWED_POINTS - 1) {
      pointList.shift();
    }
  });

  // Start rendering.
  requestAnimationFrame(renderPoints);
}

function renderPoints() {
  if (!context) return;

  context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

  context.beginPath();
  pointList.forEach((point, index) => {
    if (index === 0) return;

    const previousPoint = pointList[index - 1];

    context.moveTo(previousPoint.x, previousPoint.y);
    context.lineTo(point.x, point.y);
  });
  context.closePath();
  context.stroke();

  requestAnimationFrame(renderPoints);
}

setupCanvas();

HTML5 Canvas

The variable TOTAL_ALLOWED_POINTS determines how many points are visible on the screen simultaneously. Meanwhile, pointList holds the actual points for rendering.

In the mousemove event handler, we capture mouse coordinates and manage the number of points to maintain visibility. If the limit is reached, the earliest point is removed, creating the trailing effect you observe.

Within the render function renderPoints, we clear the canvas before drawing lines between the points from the updated list.

Note that I utilize requestAnimationFrame to continuously call renderPoints, ensuring continual updates regardless of point list changes. Alternatively, you can invoke renderPoints directly within the event handler.

Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

Answer №1

Similar questions

What is the method for inserting a clickable link into a data-image line of code using CSS3?

Does 1 CSS point amount to the same as 75% of a CSS Pixel?

Using AngularJS's ng-repeat directive to convert expressions into JavaScript code

Dynamic line breaks within an unordered list

Modify the name of the document

unorthodox method of transmitting parameters within express.js source code

Using a foreach loop to showcase data in a table

Create a loop in JavaScript to iterate through elements using both a while loop and the

Here are some steps for generating a non-integer random number that is not in the format of 1.2321312312

Unable to activate IndexedDb persistence with Firebase v9 in a Next.js PWA

Vue: Load page content only after the route change is complete

Expand the spectrum of the input range

What is the best approach for retrieving a User from my Angular front-end service?

The collapsed form-control is adjusting its attributes while resizing

Troubleshooting Problem: Difficulty with Uploading High-Resolution Images in Angular using

Ways to align content in the center using Vuetify3

Using ThreeJS to Apply Dual Materials to a Mesh Entity

Ensuring elements are properly centered within a Bootstrap grid while adjusting the window size

What exactly is the significance of "utilizing a universal class name"?

Unable to reference the namespace 'ThemeDefinition' as a valid type within Vuetify