I have a function that I created which draws a line from the coordinates of its first argument to the coordinates of the second argument. The code runs the function using the mouse coordinates as the argument for the function. However, I am having an issue where moving the mouse cursor vertically will cause the line to be uneven.
let circles = [];
function setup() {
createCanvas(600, 600);
}
function draw() {
lineCreate([pmouseX,pmouseY],[mouseX,mouseY])
}
function lineCreate(point1, point2) {
length = sqrt(pow(point2[0]-point1[0],2) + pow(point2[1]-point1[1],2))
slope = (point2[1]-point1[1])/(point2[0]-point1[0])
x = min(point1[0],point2[0])
endX = max(point1[0],point2[0])
for (let i = x; i < endX; i++) {
pointSlope = slope*(i - point1[0]) + point1[1]
circle(i,pointSlope,2,2)
}
}
You need to connect the dots with lines:
function setup() {
createCanvas(600, 600);
strokeWeight(4);
noFill();
rect(2, 2, 596, 596);
}
function draw() {
line(pmouseX, pmouseY, mouseX,mouseY)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
If you want to draw the line with individual points, you need to distinguish whether the distance between the points is larger along the x-axis or the y-axis:
function setup() {
createCanvas(600, 600);
strokeWeight(4);
noFill();
rect(2, 2, 596, 596);
fill(0);
}
function draw() {
lineCreate([pmouseX,pmouseY], [mouseX,mouseY])
}
function lineCreate(point1, point2) {
x0 = point1[0];
x1 = point2[0];
y0 = point1[1];
y1 = point2[1];
if (abs(x1 - x0) > abs(y1 - y0)) {
if (x0 > x1) {
let t = x0; x0 = x1; x1 = t;
t = y0; y0 = y1; y1 = t;
}
for (let x = x0; x <= x1; x++) {
let y = y0 + (y1-y0) * (x-x0) / (x1-x0);
circle(x, y, 2);
}
} else {
if (y0 > y1) {
let t = x0; x0 = x1; x1 = t;
t = y0; y0 = y1; y1 = t;
}
for (let y = y0; y <= y1; y++) {
let x = x0 + (x1-x0) * (y-y0) / (y1-y0);
circle(x, y, 2);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
Related
This question already has an answer here:
how to draw smooth lines on canvas without clearing it?
(1 answer)
Closed 5 months ago.
This post was edited and submitted for review 5 months ago and failed to reopen the post:
Original close reason(s) were not resolved
For horizontal and vertical lines, using translation of 0.5 for odd stroke widths produces crisper/sharper lines. How about the diagonal lines?
Link to jsfiddle
<!DOCTYPE html>
<html lang="en">
<body style="background: black">
<button id="btn">Draw Next Line</button>
<br>
<canvas style="border: 2px solid red" id="cnv"></canvas>
<script>
const ctx = document.getElementById("cnv").getContext("2d");
debugger;
const delta = 25;
const color = 'white';
const W = window.innerWidth - 80;
const H = window.innerHeight - 100;
ctx.canvas.width = W;
ctx.canvas.height = H;
ctx.lineWidth = 1;
ctx.strokeStyle = color;
// diagonal line.
ctx.moveTo(0.5, 0);
ctx.lineTo(W, H);
ctx.stroke();
// vertical lines
let i = 0.5;
document.getElementById("btn").onclick = () => {
ctx.moveTo(i * delta, 0);
ctx.lineTo(i * delta, H);
ctx.stroke();
i++;
}
</script>
</body>
</html>
As can be seen on the demo, after adding another line previously drawn diagonal lines get bolder or thicker.
How to get consistent thickness/sharpness irrespective of whether the diagonal line is drawn first or last?
You're missing a ctx.beginPath(); call before each new line:
<!DOCTYPE html>
<html lang="en">
<body style="background: black">
<button id="btn">Draw Next Line</button>
<br>
<canvas style="border: 2px solid red" id="cnv"></canvas>
<script>
const ctx = document.getElementById("cnv").getContext("2d");
debugger;
const delta = 25;
const color = 'white';
const W = window.innerWidth - 80;
const H = window.innerHeight - 100;
ctx.canvas.width = W;
ctx.canvas.height = H;
ctx.lineWidth = 1;
ctx.strokeStyle = color;
// diagonal line.
ctx.moveTo(0.5, 0);
ctx.lineTo(W, H);
ctx.stroke();
// vertical lines
let i = 0.5;
document.getElementById("btn").onclick = () => {
ctx.beginPath(); // <------------------------ Here
ctx.moveTo(i * delta, 0);
ctx.lineTo(i * delta, H);
ctx.stroke();
i++;
}
</script>
</body>
</html>
I would research a bit and draw a line manually using pixels and some online algorithm. This also involves special pixel function because we don't want the same effect over each pixel.
Found this function draw_line taken from here
.
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
var r = 255
var g = 255
var b = 255
function pixel(x, y) {
var id = ctx.createImageData(1, 1); // only do this once per page
var d = id.data; // only do this once per page
d[0] = r;
d[1] = g;
d[2] = b;
d[3] = 255;
ctx.putImageData(id, x, y);
}
let draw_line = (x1, y1, x2, y2) => {
// Iterators, counters required by algorithm
let x, y, dx, dy, dx1, dy1, px, py, xe, ye, i;
// Calculate line deltas
dx = x2 - x1;
dy = y2 - y1;
// Create a positive copy of deltas (makes iterating easier)
dx1 = Math.abs(dx);
dy1 = Math.abs(dy);
// Calculate error intervals for both axis
px = 2 * dy1 - dx1;
py = 2 * dx1 - dy1;
// The line is X-axis dominant
if (dy1 <= dx1) {
// Line is drawn left to right
if (dx >= 0) {
x = x1;
y = y1;
xe = x2;
} else { // Line is drawn right to left (swap ends)
x = x2;
y = y2;
xe = x1;
}
pixel(x, y); // Draw first pixel
// Rasterize the line
for (i = 0; x < xe; i++) {
x = x + 1;
// Deal with octants...
if (px < 0) {
px = px + 2 * dy1;
} else {
if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
y = y + 1;
} else {
y = y - 1;
}
px = px + 2 * (dy1 - dx1);
}
// Draw pixel from line span at
// currently rasterized position
pixel(x, y);
}
} else { // The line is Y-axis dominant
// Line is drawn bottom to top
if (dy >= 0) {
x = x1;
y = y1;
ye = y2;
} else { // Line is drawn top to bottom
x = x2;
y = y2;
ye = y1;
}
pixel(x, y); // Draw first pixel
// Rasterize the line
for (i = 0; y < ye; i++) {
y = y + 1;
// Deal with octants...
if (py <= 0) {
py = py + 2 * dx1;
} else {
if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
x = x + 1;
} else {
x = x - 1;
}
py = py + 2 * (dx1 - dy1);
}
// Draw pixel from line span at
// currently rasterized position
pixel(x, y);
}
}
}
for (var i = 0; i < 50; i++) {
draw_line(0, 0, 50, 100)
}
<canvas></canvas>
I have a program in JavaScript, but I can't display the graph points like (2,1), (3,2), (4,2), (5,3), (6,4), (7,4), (8,5).
function dda(x1, y1, x2, y2) {
var dx = x2 - x1;
var dy = y2 - y1;
if (Math.abs(dx) > Math.abs(dy)) {
var step = Math.abs(dx);
} else {
var step = Math.abs(dy);
}
var x_inc = dx / step;
var y_inc = dy / step;
var x = x1;
var y = y1;
for (var k = 1; k < step; k++) {
x = x + x_inc;
y = y + y_inc; //I'm confused about this part
}
return x;
}
console.log(dda(2, 1, 8, 5));
You need to collect x and y values.
Beside this, you need to start with k = 0 and increment the values after using the values.
function dda(x1, y1, x2, y2) {
const
dx = x2 - x1,
dy = y2 - y1,
step = Math.abs(dx) > Math.abs(dy)
? Math.abs(dx)
: Math.abs(dy),
x_inc = dx / step,
y_inc = dy / step,
result = [];
for (let k = 0, x = x1, y = y1; k < step; k++) {
result.push([x, y]);
x += x_inc;
y += y_inc;
}
return result;
}
console.log(dda(2, 1, 8, 5));
.as-console-wrapper { max-height: 100% !important; top: 0; }
let cones = [];
function setup() {
createCanvas(360,240);
for (let i = 0; i < 50; i++) {
let x = random(0, 360);
let y = random(0, 240);
let x1 = random(0, 360);
let y1 = random(0, 240);
let x2 = random(0, 360);
let y2 = random(0, 240);
cones[i] = new Triangle(x,y,x1,y1,x2,y2);
}
}
function draw() {
background(0);
for(let i = 0; i < 5; i++) {
//cones[i].move();
cones[i].display();
}
}
function mousePressed() {
let x = random(0, 360);
let y = random(0, 240);
let x1 = random(0, 360);
let y1 = random(0, 240);
let x2 = random(0, 360);
let y2 = random(0, 240);
let c = new Triangle(mouseX, mouseY, x1, y1, x2, y2);
cones.push(c);
}
class Triangle {
constructor(x,y,x1, y1,x2,y2) {
this.x = x;
this.y = y;
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
}
display() {
stroke(50,194,232);
strokeWeight(4);
noFill();
triangle(this.x, this.y, this.x1, this.y1, this.x2, this.y2);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
I am trying to get a new triangle to add to the canvas every time the mouse is pressed... if you could also help me change the size/color that would be amazing!!
Your algorithm works almost perfectly, but when you draw the triangles, you just go through the first 5 elements of the array and not all the elements (cones.length):
for(let i = 0; i < 5; i++)
for(let i = 0; i < cones.length; i++)
I recommend to write a function (newTriangle), which constructs a new random triangle. Generate random color values in the function. See the example:
let cones = [];
function setup() {
createCanvas(360,240);
for (let i = 0; i < 2; i++) {
newTriangle();
}
}
function draw() {
background(0);
for(let i = 0; i < cones.length; i++) {
//cones[i].move();
cones[i].display();
}
}
function mousePressed() {
newTriangle(mouseX, mouseY);
}
function newTriangle(x, y) {
let x0 = x ?? random(0, width);
let y0 = y ?? random(0, height);
let x1 = random(0, width);
let y1 = random(0, height);
let x2 = random(0, width);
let y2 = random(0, height);
let r = random(0, 256);
let g = random(0, 256);
let b = random(0, 256);
let c = new Triangle(x0, y0, x1, y1, x2, y2, r, g, b);
cones.push(c);
}
class Triangle {
constructor(x, y, x1, y1, x2, y2, r, g, b) {
this.x = x;
this.y = y;
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.c = [r, g, b]
}
display() {
stroke(...this.c);
strokeWeight(4);
noFill();
triangle(this.x, this.y, this.x1, this.y1, this.x2, this.y2);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
I'm writing a simple raycast in htm5l and the main issue with the raycast is that the line goes off in a direction of probably infinite length.. I would like to limit that length to a specific radius but I'm not having any luck. If someone could guide me that'd be great.
window.addEventListener('DOMContentLoaded', (event) => {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let coord = {
x: 0,
y: 0
}
function line(x1, y1, x2, y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
class Vector {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class Boundery {
constructor(x1, y1, x2, y2) {
this.a = new Vector(x1, y1);
this.b = new Vector(x2, y2);
}
show() {
ctx.strokeStyle = '#000000'
line(this.a.x, this.a.y, this.b.x, this.b.y);
}
}
class Ray {
constructor(x, y) {
this.pos = new Vector(x, y);
this.dir = new Vector(Math.cos(1), Math.sin(0));
}
show() {
ctx.strokeStyle = '#000000';
ctx.beginPath();
ctx.ellipse(this.pos.x, this.pos.y, 5, 5, 0, 0, Math.PI * 2);
ctx.stroke();
}
cast(wall) {
let x1 = wall.a.x;
let y1 = wall.a.y;
let x2 = wall.b.x;
let y2 = wall.b.y;
let x3 = this.pos.x;
let y3 = this.pos.y;
let x4 = this.pos.x + this.dir.x;
let y4 = this.pos.y + this.dir.y;
let den = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
if (den == 0) {
return;
}
let t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den;
let u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den;
if (t > 0 && t < 1 && u > 0) {
let point = new Vector(x1 + t * (x2 - x1), y1 + t * (y2 - y1));
return point;
} else {
return;
}
}
}
let wall = new Boundery(300, 100, 300, 300);
let ray = new Ray(100, 200);
function tick(timestamp) {
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
wall.show();
ray.show();
let r = ray.cast(wall);
if (r) {
ctx.fillStyle = 'red';
ctx.ellipse(r.x, r.y, 10, 10, 0, 0, 2 * Math.PI);
ctx.fill();
}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
});
<canvas id="canvas" width="2000" height="1000"></canvas>
So the ray currently fires to the right (1,0) of the small red circle but it's distance just goes on forever so I'm trying to limit that distance. In the example the position the ray hits the wall is the red circle that's drawn on the wall
Ray length and direction
Modify the ray to have the start position, a direction, and a length. as follows
class Ray {
constructor(pos, direction, length) {
this.pos = pos;
this.dir = direction;
this.length = length;
}
You can get the end point with
get end() {
return new Vector(
this.pos.x + Math.cos(this.dir) * this.length,
this.pos.y + Math.sin(this.dir) * this.length
);
}
When you cast the ray you convert the ray to a line segment and then check against any wall segments for the intercept. Only points withing the length of the ray will be found.
Example.
The example uses a ray to check against many walls. It finds the closest intercept to the to the start of the ray and within the rays length.
Note (FOR example only) the walls are random so if a wall gets to close to the ray, click the canvas to randomize the walls.
I have re-organised it somewhat with Vector as a point, Line (2 vectors) as a line segment with an intercept function (also represents a wall), And Ray as a vector, direction and length. The Ray.cast finds the intercept of an array of line, returning undefined if no intercept found.
const ctx = canvas.getContext("2d");
Math.TAU = Math.PI * 2;
Math.rand = (min, max) => Math.random() * (max - min) + min;
var myRay;
const WALL_COUNT = 30;
const WALL_STYLE = {radius: 0, lineWidth: 1, strokeStyle: "#000"};
const RAY_STYLE_A = {radius: 2, lineWidth: 1, strokeStyle: "#0FF", fillStyle: "#F00"};
const RAY_STYLE_B = {radius: 5, lineWidth: 3, strokeStyle: "#00F", fillStyle: "#F00"};
const RAY_INTERCEPT_STYLE = {radius: 5, lineWidth: 1, strokeStyle: "#000", fillStyle: "#FF0"};
const ROTATE_RAY = 10; // seconds per rotation
const walls = [];
setTimeout(init, 0);
canvas.addEventListener("click",init);
class Vector {
constructor(x, y) {
this.x = x;
this.y = y;
}
draw(ctx, {radius = 5, lineWidth = 2, strokeStyle = "#000", fillStyle = "#F00"} = {}) {
ctx.strokeStyle = strokeStyle;
ctx.fillStyle = fillStyle;
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.arc(this.x, this.y, radius, 0, Math.TAU);
ctx.fill();
ctx.stroke();
}
}
class Line {
constructor(start, end) {
this.start = start;
this.end = end;
}
draw(ctx, {radius = 5, lineWidth = 2, strokeStyle = "#000", fillStyle = "#F00"} = {}) {
if (radius > 0) {
this.start.draw(ctx, {radius, lineWidth, strokeStyle, fillStyle});
this.end.draw(ctx, {radius, lineWidth, strokeStyle, fillStyle});
}
ctx.strokeStyle = strokeStyle;
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.moveTo(this.start.x, this.start.y);
ctx.lineTo(this.end.x, this.end.y);
ctx.stroke();
}
intercept(line) {
var x1, y1, x2, y2, x3, y3, c, u;
x1 = line.end.x - line.start.x;
y1 = line.end.y - line.start.y;
x2 = this.end.x - this.start.x;
y2 = this.end.y - this.start.y;
c = x1 * y2 - y1 * x2;
if (c) {
x3 = line.start.x - this.start.x;
y3 = line.start.y - this.start.y;
u = (x1 * y3 - y1 * x3) / c;
if (u >= 0 && u <= 1) {
u = (x2 * y3 - y2 *x3) / c;
if (u >= 0 && u <= 1) { return [u, line.start.x + x1 * u, line.start.y + y1 * u] }
}
}
}
}
class Ray {
constructor(pos, direction, length) {
this.pos = pos;
this.dir = direction;
this.length = length;
}
draw(ctx, {radius = 5, lineWidth = 2, strokeStyle = "#000", fillStyle = "#F00"} = {}) {
this.pos.draw(ctx, {radius, lineWidth, strokeStyle, fillStyle});
ctx.strokeStyle = strokeStyle;
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.moveTo(this.pos.x, this.pos.y);
ctx.lineTo(
this.pos.x + Math.cos(this.dir) * this.length,
this.pos.y + Math.sin(this.dir) * this.length
);
ctx.stroke();
}
get end() {
return new Vector(
this.pos.x + Math.cos(this.dir) * this.length,
this.pos.y + Math.sin(this.dir) * this.length
);
}
get line() {
return new Line(this.pos, this.end);
}
cast(lines) {
const tLine = this.line;
var minDist = 1, point;
for (const line of lines) {
const result = line.intercept(tLine);
if (result) {
const [u, x, y] = result;
if (u <= minDist) {
minDist = u;
if (!point) { point = new Vector(x, y) }
else {
point.x = x;
point.y = y;
}
point.u = u;
}
}
}
return point;
}
}
function init() {
walls.length = 0;
for (let i = 0; i < WALL_COUNT / 2; i++) {
walls.push(new Ray(
new Vector(Math.rand(0, canvas.width * 0.4), Math.rand(0, canvas.height)),
(Math.rand(0, 8) | 0) / 4 * Math.PI, 100
).line);
walls.push(new Ray(
new Vector(Math.rand(canvas.width * 0.6, canvas.width), Math.rand(0, canvas.height)),
(Math.rand(0, 8) | 0) / 4 * Math.PI, 100
).line);
}
if(!myRay) {
myRay = new Ray(new Vector(canvas.width / 2, canvas.height / 2), 0, Math.max(canvas.width, canvas.height) * 0.485);
requestAnimationFrame(mainLoop);
}
}
function mainLoop(time) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
myRay.dir = (time / (ROTATE_RAY * 1000)) * Math.TAU;
const point = myRay.cast(walls)
myRay.draw(ctx, RAY_STYLE_A);
for(const w of walls) { w.draw(ctx, WALL_STYLE) }
if (point) {
const len = myRay.length;
myRay.length = point.u * len;
myRay.draw(ctx, RAY_STYLE_B);
myRay.length = len;
point.draw(ctx, RAY_INTERCEPT_STYLE);
}
requestAnimationFrame(mainLoop);
}
#canvas {
border: 2px solid black;
}
<canvas id="canvas" width="500" height="500"> </canvas>
I am making a simple HTML5 Canvas drawing app where a circle is placed at a x and y position each time the mouse moves. The (quite common but unsolved) problem is: when the mouse is moved very fast (as in faster than the mouse move events are triggered), you end up with space in between the circles.
I have used Bresenham's line algorithm to somewhat successfully draw circles between the gaps. However, I have encountered another problem: when the color is one of translucency I get an unintentional fade-to-darker effect.
Here's an example:
I don't understand why this is happening. How would you properly interpolate between two points using Bresenham's line algorithm? Or some other algorithm?
Here's my code: http://jsfiddle.net/E5NBs/
var x = null;
var y = null;
var prevX = null;
var prevY = null;
var spacing = 3;
var drawing = false;
var size = 5;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function createFlow(x1, y1, x2, y2, callback) {
var dx = x2 - x1;
var sx = 1;
var dy = y2 - y1;
var sy = 1;
var space = 0;
if (dx < 0) {
sx = -1;
dx = -dx;
}
if (dy < 0) {
sy = -1;
dy = -dy;
}
dx = dx << 1;
dy = dy << 1;
if (dy < dx) {
var fraction = dy - (dx >> 1);
while (x1 != x2) {
if (fraction >= 0) {
y1 += sy;
fraction -= dx;
}
fraction += dy;
x1 += sx;
if (space == spacing) {
callback(x1, y1);
space = 0;
} else {
space += 1;
}
}
} else {
var fraction = dx - (dy >> 1);
while (y1 != y2) {
if (fraction >= 0) {
x1 += sx;
fraction -= dy;
}
fraction += dx;
y1 += sy;
if (space == spacing) {
callback(x1, y1);
space = 0;
} else {
space += 1;
}
}
}
callback(x1, y1);
}
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, 500, 400);
canvas.onmousemove = function(event) {
x = parseInt(this.offsetLeft);
y = parseInt(this.offsetTop);
if (this.offsetParent != null) {
x += parseInt(this.offsetParent.offsetLeft);
y += parseInt(this.offsetParent.offsetTop);
}
if (navigator.appVersion.indexOf('MSIE') != -1) {
x = (event.clientX + document.body.scrollLeft) - x;
y = (event.clientY + document.body.scrollTop) - y;
} else {
x = event.pageX - x;
y = event.pageY - y;
}
context.beginPath();
if (drawing == true) {
if (((x - prevX) >= spacing || (y - prevY) >= spacing) || (prevX - x) >= spacing || (prevY - y) >= spacing) {
createFlow(x, y, prevX, prevY, function(x, y) {
context.fillStyle = 'rgba(0, 0, 0, 0.1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();
});
prevX = x, prevY = y;
}
} else {
prevX = x, prevY = y;
}
};
canvas.onmousedown = function() {
drawing = true;
};
canvas.onmouseup = function() {
drawing = false;
};
HTML Canvas supports fractional / floating point coordinates, so using an algorithm for integer coordinate based pixel canvas is not necessary and could be considered even counter-productive.
A simple, generic solution would be something along these lines:
when mouse_down:
x = mouse_x
y = mouse_y
draw_circle(x, y)
while mouse_down:
when mouse_moved:
xp = mouse_x
yp = mouse_y
if (x != xp or y != yp):
dir = atan2(yp - y, xp - x)
dist = sqrt(pow(xp - x, 2) + pow(yp - y, 2))
while (dist > 0):
x = x + cos(dir)
y = y + sin(dir)
draw_circle(x, y)
dist = dist - 1
That is, whenever the mouse is moved to a location different from the location of the last circle drawn, walk towards the new location with steps having distance one.
If I understand well, you want to have rgba(0, 0, 0, 0.1) on every point. If so, then you can clear the point before drawing new one.
// this is bad way to clear the point, just I don't know canvas so well
context.fillStyle = 'rgba(255, 255, 255, 1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();
context.fillStyle = 'rgba(0, 0, 0, 0.1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();
I've figured it out.
"context.beginPath();" needed to be in the createFlow callback function like so:
createFlow(x, y, prevX, prevY, function(x, y) {
context.beginPath();
context.fillStyle = 'rgba(0, 0, 0, 0.1)';
context.arc(x, y, size, 0, 2 * Math.PI, false);
context.fill();
});