HTML5 - Clearing canvas with multiple animations - where is the main draw loop? - html

Question

I have a mixture of static, interactive, and animated objects in my canvas. I can't seem to find a way to clear the draw loop in a global way such that there is no 'smearing' in any of the objects. My code is below. Any help greatly appreciated.
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var mouseX = 300;
var mouseY = 300;
var inc = 0;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveThing();
drawBezier();
drawCircle();
drawInteractive();
var putPoint = function (e) {
// update mouse
mouseX = e.clientX;
mouseY = e.clientY;
// clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBezier();
drawCircle();
drawInteractive();
}
canvas.addEventListener("mousemove", putPoint);
function drawBezier() {
for (var i = 0; i < 100; i++) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(200, mouseX, 900, -300, i * 20, 600 + Math.random() * 30);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();
}
}
function drawCircle() {
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
function drawInteractive() {
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(mouseX, mouseY - 40, 100, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
function moveThing() {
inc++;
// ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(95, 50 + inc, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
requestAnimationFrame(moveThing);
}
</script>

Answer 1

I have refactored your code a little creating a function update which is the main loop of the canvas.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var mouseX = 300;
var mouseY = 300;
var inc = 0;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
update();
var putPoint = function (e) {
// update mouse
mouseX = e.clientX;
mouseY = e.clientY;
// clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBezier();
drawCircle();
drawInteractive();
}
canvas.addEventListener("mousemove", putPoint);
function drawBezier() {
for (var i = 0; i < 100; i++) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(200, mouseX, 900, -300, i * 20, 600 + Math.random() * 30);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();
}
}
function drawCircle() {
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
function drawInteractive() {
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(mouseX, mouseY - 40, 100, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveThing();
drawBezier();
drawCircle();
drawInteractive();
requestAnimationFrame(update);
}
function moveThing() {
inc++;
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(95, 50 + inc, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
<canvas id="myCanvas" />