How would someone draw a rectangle without repeating elements via mouse events?

[mirabledictu]

Currently, this is how I do it

import rough from 'roughjs'

let startX, startY, endX, endY, node

const svg = document.getElementById('svg')
const roughSVG = rough.svg(svg);

function pointerMove(e) {
    if (!startX) return

    end.x = e.x
    end.y = e.y

    if (node) {
        svg.removeChild(node)
    }

    node = roughSVG.rectangle(startX, startY, endX - startX, endY - startY)
    svg.appendChild(node)
}

function pointerDown(e) {
    startX = e.x
    startY = e.y
}

function pointerUp(e) {
    endX = e.x
    endY = e.y

    if (node) {
        svg.removeChild(node)
    }

    node = roughSVG.rectangle(startX, startY, endX - startX, endY - startY)
    svg.appendChild(node)
}

This makes the rectangle have shaky animation. Is there a good example of this? Or am I missing a method?

[pshihn]

Every time you render a rectangle a new random rectangle is generated. If you want to have most consistent rendering, you should provide a seed number. Seed could be any integer but you can always ask rough to create a new seed for you.

node = roughSVG.rectangle(startX, startY, endX - startX, endY - startY, { seed: rough.newSeed() })