http://codepen.io/FreelanceDev/pen/kLpJSf?editors=1010
You can find my CodePen project through the provided link.
While the HTML and CSS elements are working correctly, I am facing issues with the JavaScript functionality. The desired outcome should be drawing a line from the last clicked point.
The JavaScript code snippet in question is as follows -
var randomColor = function() {
return '#' + Math.random().toString(16).slice(2, 8);
}
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
color = randomColor();
var height = window.innerHeight
var width = window.innerWidth
canvas.width = width
canvas.height = height
var mouse = {};
var circle_count = 10;
var circles = [];
var generate = function() {
for (var i = 0; i < circle_count; i++) {
circles.push(new circle());
}
}
setInterval(generate, 7500);
canvas.addEventListener('mousedown', getPosition, false);
canvas.addEventListener('touch', getPosition, false);
function getPosition(e) {
mouse.x = e.pageX;
mouse.y = e.pageY;
}
canvas.addEventListener("mousedown", function() {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
});