cancelAnimationFrame() does not seem to work when called inside an object's method. I have tried binding the this value to the callback function (as demonstrated on MDN with setTimeout) but I received a TypeError when using cancelAnimationFrame(). I then tried setting the this value to a local variable called _this and called cancelAnimationFrame() again. That time, I did not receive an error but the animation itself is still playing. How do I cancel the animation?
I have recreated the issue I am having below. If you open a console window, you will see that the animation is still running.
function WhyWontItCancel() {
this.canvas = document.createElement("canvas");
this.canvas.width = 200;
this.canvas.height = 10;
document.body.appendChild(this.canvas);
this.draw = this.canvas.getContext("2d");
this.draw.fillStyle = "#f00";
this.position = 0;
};
WhyWontItCancel.prototype.play = function() {
if (this.position <= 190) {
this.draw.clearRect(0, 0, 400, 10);
this.draw.fillRect(this.position, 0, 10, 10);
this.position += 2;
} else {
//window.cancelAnimationFrame(this.animation.bind(this));
var _this = this;
window.cancelAnimationFrame(_this.animation);
console.log("still running");
}
this.animation = window.requestAnimationFrame(this.play.bind(this));
};
var animation = new WhyWontItCancel();
animation.play();
Seems that you miss two things here. First, this.animation = window.requestAnimationFrame(this.play.bind(this)); line is invoked always when play() is called. Contrary to what you might think, cancelAnimationFrame only removes the previously requested RAF call. Strictly speaking, it's not even necessary here. Second, you don't have to bind on each RAF call; you might do it just once:
function AnimatedCanvas() {
this.canvas = document.createElement("canvas");
this.canvas.width = 200;
this.canvas.height = 10;
document.body.appendChild(this.canvas);
this.draw = this.canvas.getContext("2d");
this.draw.fillStyle = "#f00";
this.position = 0;
this.play = this.play.bind(this); // takes `play` from prototype object
};
AnimatedCanvas.prototype.play = function() {
if (this.position <= 190) {
this.draw.clearRect(0, 0, 400, 10);
this.draw.fillRect(this.position, 0, 10, 10);
this.position += 2;
this.animationId = window.requestAnimationFrame(this.play);
}
};
You might want to add cancel into your prototype to be able to stop your animation, for example:
AnimatedCanvas.prototype.cancel = function() {
if (this.animationId) {
window.cancelAnimationFrame(this.animationId);
}
};
... but the point is, it's not useful in the use case described in the question.
Related
I am getting no output. I'm trying to understand getInterval as I am new to JS, but can't work out why I don't get the lines displayed.
var Canvas = {
canvas : undefined,
ctx : undefined
};
var Mouse = {
x : [0],
y : [0]
};
function Drawing(width, colour){
this.width = width;
this.colour = colour;
Drawing.prototype.output = function(ctx){
ctx.strokeStyle = this.colour;
ctx.lineWidth = this.width;
for (var i = 0; i < Mouse.x.length-1; i++) {
ctx.beginPath();
ctx.moveTo(Mouse.x[i], Mouse.y[i]);
ctx.lineTo(Mouse.x[i+1], Mouse.y[i+1]);
ctx.stroke();
}
}
}
Canvas.start = function () {
function catchAction(evt) {
Mouse.x[Mouse.x.length] = evt.pageX;
Mouse.y[Mouse.y.length] = evt.pageY;
}
Canvas.canvas = document.getElementById("myCanvas");
Canvas.canvas.width = Canvas.canvas.height = 600;
Canvas.ctx = Canvas.canvas.getContext('2d');
let drawing = new Drawing(10, 'red');
Canvas.canvas.addEventListener("mousedown", catchAction, false);
Canvas.canvas.addEventListener("touchstart", catchAction, false);
window.setInterval(drawing.output(Canvas.ctx), 500);
};
document.addEventListener( 'DOMContentLoaded', Canvas.start);
Also I am getting a Violation: Added non-passive event listener.
The first argument to setInterval should be a string if you are going to pass in code like that.
https://developer.mozilla.org/en-US/docs/Web/API/setInterval .
Try changing it to a function like this:
window.setInterval(() => {drawing.output(Canvas.ctx)}, 500);
also try this for you other error:
document.addEventListener( 'DOMContentLoaded', (e) => {Canvas.start()});
NOTE: I haven't tested either suggestion, but I'm 99% certain the setInterval one is correct.
My 9 year old son is learning Javascript. I'm not able to easily help him. He's working on a small project, and can't seem to get past an error:
Uncaught ReferenceError: mainLoop is not defined.
This is a great learning opportunity for him. We appreciate any clues as to what's going on in his code that's causing the error. Thanks!
Here's what he's got:
var CANVAS_WIDTH = 800;
var CANVAS_HEIGHT = 400;
var LEFT_ARROW_KEYCODE = 37;
var RIGHT_ARROW_KEYCODE = 39;
//SETUP
var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
document.body.appendChild(canvas);
window.requestAnimationFrame(mainLoop);
var shapeInfo = {
squares: {
square1: {
x: 10,
y: 10,
w: 30,
h: 30,
color: 'orange'
}
}
};
window.addEventListener('keydown', onKeyDown);
window.addEventListener('keyup', onKeyUp);
var leftArrowKeyIsPressed = false;
var rightArrowKeyIsPressed = false;
var touchingRightEdge = false;
// SENSORS
function sense() {
if (shapeInfo.squares.square1.x <= CANVAS_WIDTH - 30) {
touchingRightEdge = true;
}
// PLAYER CONTROLS
function onKeyDown(event) {
if (event.keyCode === RIGHT_ARROW_KEYCODE) {
rightArrowKeyIsPressed = true;
}
}
function onKeyUp(event) {
if (event.keyCode === RIGHT_ARROW_KEYCODE) {
rightArrowKeyIsPressed = false;
}
}
//MAIN LOOP
function mainLoop() {
window.requestAnimationFrame(mainLoop);
draw();
}
//DRAW
function draw() {
c.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
// Draw the frame
c.strokeStyle = 'black';
c.strokeRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
// Draw square1
c.fillStyle = shapeInfo.squares.square1.color;
c.fillRect(shapeInfo.squares.square1.x, shapeInfo.squares.square1.y, shapeInfo.squares.square1.w, shapeInfo.squares.square1.h);
if (rightArrowKeyIsPressed) {
if (!touchingRightEdge) {
shapeInfo.squares.square1.x++;
}
}
if (leftArrowKeyIsPressed) {
shapeInfo.squares.square1.x--;
}
// end
}
}
Great to hear that your son is learning something as cool as JavaScript. Now as #Pointy pointed out (no pun intended) you are calling window.requestAnimationFrame(mainLoop); outside the sense function which causes the error. The mainLoop function does not exist outside sense.
The solution to this would to be define your functions globally, in this case meaning:
not inside another function.
So prevent doing:
function foo() {
// Do something
function bar() {
// Do something else
}
}
foo() // Do someting
bar() // Uncaught ReferenceError: bar is not defined.
Now bar only exists within foo. Instead do this:
function foo() {
// Do something
}
function bar() {
// Do something else
}
foo() // Do something
bar() // Do something else
Both functions can now be called from the same scope (remember this word).
Also in your mainLoop function you got to switch some things around. Try to call the draw function first before you start the mainLoop again. JavaScript works from top to bottom. So in the example below it will first draw and then start the loop again.
function mainLoop() {
draw();
window.requestAnimationFrame(mainLoop);
}
You're doing great, kid! Keep it up and come back whenever you want. We'll help you out!
I have a class I am attempting to write that looks like the below.
When I run the class, I get an error:
Audio.js:53 Uncaught ReferenceError: bufferLength is not defined
I believe this is because bufferLength is not available in the drawCanvas function.
I have tried adding the this keyword, however this did not work.
How can I make these variables available to functions within a method of this class?
export const LINE_COLORS = ['rgba(255, 23, 204, 0.5)', 'rgba(130, 23, 255, 0.5)'];
// The dimensions of the current viewport
// - Used to set canvas width & height
export const PAGE_DIMENSIONS = {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
};
class AudioEngine {
constructor(params) {
this.params = params;
this.audio = new Audio();
this.ctx = new (window.AudioContext || window.webkitAudioContext)();
this.analyser = this.ctx.createAnalyser();
this.source = this.ctx.createMediaElementSource(this.audio);
this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);
this.bufferLength = this.analyser.frequencyBinCount;
this.canvas = document.getElementById(params.waveform);
this.onInit();
}
onInit() {
this.ConfigAudio();
this.DrawAudioWave();
}
ConfigAudio = () => {
this.audio.src = this.params.stream;
this.audio.controls = false;
this.audio.autoplay = false;
this.audio.crossOrigin = 'anonymous';
this.analyser.smoothingTimeConstant = 0.6;
this.source.connect(this.ctx.destination);
this.source.connect(this.analyser);
this.analyser.fftSize = 2048;
this.analyser.getByteFrequencyData(this.dataArray);
document.body.appendChild(this.audio);
};
DrawAudioWave = () => {
// Bind to the context
const canvasCtx = this.canvas.getContext('2d');
function drawCanvas() {
// We always start the drawing function by clearing the canvas. Otherwise
// we will be drawing over the previous frames, which gets messy real quick
canvasCtx.clearRect(0, 0, PAGE_DIMENSIONS.width, PAGE_DIMENSIONS.height);
requestAnimationFrame(drawCanvas);
const sliceWidth = (PAGE_DIMENSIONS.width * 1.0) / bufferLength;
// Create a new bounding rectangle to act as our backdrop, and set the
// fill color to black.
canvasCtx.fillStyle = '#000';
canvasCtx.fillRect(0, 0, PAGE_DIMENSIONS.width, PAGE_DIMENSIONS.height);
// Loop over our line colors. This allows us to draw two lines with
// different colors.
LINE_COLORS.forEach((color, index) => {
let x = 0;
// Some basic line width/color config
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = color;
// Start drawing the path
canvasCtx.beginPath();
for (let i = 0; i < bufferLength; i++) {
// We offset using the loops index (stops both colored lines
// from overlapping one another)
const v = dataArray[i] / 120 + index / 20;
// Set the Y point to be half of the screen size (the middle)
const y = (v * PAGE_DIMENSIONS.height) / 2;
if (i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height / 2);
canvasCtx.stroke();
});
}
drawCanvas();
};
audioToggle = () => (this.audio.paused ? this.audio.play() : this.audio.pause());
}
export default AudioEngine;
requestAnimationFrame will call drawCanvas with the global context bound, so this.bufferLength will not be defined. Easiest solution is to take advantage of lexical scoping, which arrow functions make easy.
If you look at how you're defining your class's methods, they're using arrow functions. This is precisely to avoid the issue with rebinding this that you're currently having. You should read up on this and scoping in JavaScript to better understand why your code isn't working as you'd expect.
Couple solutions, both require drawCanvas -> this.drawCanvas:
(A) Bind the context of drawCanvas before passing it to requestAnimationFrame:
requestAnimationFrame(drawCanvas.bind(this))
Or (B) take advantange of lexical scoping:
requestAnimationFrame(() => drawCanvas())
"Lexical" scope is scope derived from the "text", i.e. where your arrow function is defined relative to other scopes. Non-lexical scoping uses the caller function to determine bound context.
You can also change the drawCanvas function itself to be bound to the appropriate scope using .bind or changing it to an arrow function.
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
How does the "this" keyword work?
Pass correct "this" context to setTimeout callback? (replace setTimeout with requestAnimationFrame in their examples)
i can't get the image to move in the canvas. tried many things and failed please help
var canvas = document.getElementById("mainCanvas");
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
start here
var player = function(img){
x=10,
y=10,
width=20,
height=20
}
add the player
window.addEventListener("keydown", function(e){
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
delete keys[e.keyCode];
}, false);
function game(){
update();
render();
}
function update(){
if(keys[37]) player.y--;
if(keys[38]) player.y++;
if(keys[39]) player.x--;
if(keys[40]) player.x++;
};
i need to know how to get the player to move
I would suggest changing your code logic. First, use requestAnimationFrame() to register method to be fired that will render/update your canvas automatically only when it is needed. Read the basic details here.
I do not know how your logic is implemented, the source you posted is rather incomplete, but suggesting you change var player into object instead of function (so player.x++ will work):
function render() {
//your render code here
player1.draw();
requestAnimationFrame(render);
}
function Player(img){
this.x = 10;
this.y = 10;
this.height = 20;
this.width = 20;
this.img = img;
}
Player.prototype.draw = function() {
canvas.drawImage(this.img);
};
//create instance of Player
player1 = new Player(handleToYourPlayerImage);
// start it
requestAnimationFrame(render);
(Don't forget to add your keyboard handling code to that.)
i have been having trouble with reading a mouse position on a canvas. The code is working (semi) correctly as it reads the position when clicking he canvas in IE but only on one frame, in chrome it is just displaying the value as 0.
Here is the full code:
<script>
var blip = new Audio("blip.mp3");
blip.load();
var levelUp = new Audio("levelUp.mp3");
levelUp.load();
var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
context.font = '18pt Calibri';
context.fillStyle = 'white';
//load and draw background image
var bgReady = false;
var background = new Image();
background.src = 'images/background.jpg';
background.onload = function(){
bgReady = true;
}
var startMessage = 'Click the canvas to start';
//load plane image
var planeReady = false;
var planeImage = new Image();
planeImage.src = 'images/plane.png';
planeImage.onload = function() {
planeReady = true;
}
//load missile image
var missileReady = false;
var missileImage = new Image();
missileImage.src = 'images/missile-flipped.gif';
missileImage.onload = function() {
missileReady = true;
}
//initialise lives and score
var score = 0;
var lives = 3;
var missilesLaunched = 0;
var missileSpeed = 5;
var level = 1;
var missileX = 960;
var missileY = Math.random() * 500;
if (missileY > 480) {
missileY = 480;
}
function getMousePos(canvas, event) {
return {
x: input.x - rect.left,
y: input.y - rect.top
};
}
function update_images(event) {
var pos = getMousePos(canvas.getBoundingClientRect(), mouseInput);
planeImage.y = pos.y;
missileX = missileX - missileSpeed;
if (missileX < - 70) {
missilesLaunched++;
missileX = 960;
missileY = Math.random() * 500;
if (missileY > 480) {
missileY = 480;
}
blip.play();
score = missilesLaunched;
if (score % 5 == 0) {
missileSpeed = missileSpeed + 2;
level++;
levelUp.play();
}
}
}
function reload_images() {
if (bgReady = true) {
context.drawImage(background, 0, 0);
}
if (planeReady = true) {
context.drawImage(planeImage, 10, planeImage.y);
}
if (missileReady = true) {
context.drawImage(missileImage, missileX, missileY);
}
context.fillText('Lives: ' + lives, 200, 30);
context.fillText('Score: ' + score, 650, 30);
context.fillText('Level: ' + missileSpeed, 420, 30);
context.fillText('Position: ' + missileImage.y, 420, 70);
}
function main(event) {
var mouseInput = { x: 0, y: 0 };
document.addEventListener("mousemove", function (event) {
mouseInput.x = event.clientX;
mouseInput.y = event.clientY;
});
update_images(event);
reload_images();
if (lives > 0) {
window.requestAnimationFrame(main);
}
else {
}
}
function start() {
context.drawImage(background, 0, 0);
context.fillText('Click the canvas to start', 350, 250);
function startMain(event) {
game.removeEventListener("click", startMain);
main(event);
}
canvas.addEventListener("mousedown", startMain);
}
start();
</script>
Joe, you should actually be capturing the mouse position every time you click...
...but you're actually also starting a new game (without stopping the old one), every time you click, too.
First problem: starting game engine several times to draw on the same instance of the canvas
Solution:
In your start function, you need to remove the mousedown event listener, after you've triggered it.
function start () {
// ... other setup
function startMain (event) {
canvas.removeEventListener("click", startMain);
main(event);
}
canvas.addEventListener("click", startMain);
}
Now it will only listen for the first click, before starting, and will only start once.
Second Problem: mouse doesn't update as expected
Solution: two issues here...
...first, you are passing event into main on first call...
...after that, you're passing main into requestAnimationFrame.
requestAnimationFrame won't call it with an event, it will call it with the number of microseconds (or ms or some other unit as a fractional precision of ms) since the page was loaded.
So the first time you got main({ type: "mousedown", ... });.
The next time you get main(4378.002358007);
So lets refactor the startMain we had above, so that main never ever collects an event, just a time.
function startMain ( ) {
canvas.removeEventListener("click", startMain);
requestAnimationFrame(main);
}
The next problem is that even if you were getting just events, you're only ever capturing a click event (which as we mentioned earlier, fires a new copy of the game logic).
Your solution is to separate the code which catches mouse events from the code which reads mouse position.
var mouseInput = { x: 0, y: 0 };
document.addEventListener("mousemove", function (event) {
mouseInput.x = event.clientX;
mouseInput.y = event.clientY;
});
function getMousePos (rect, input) {
return {
x : input.x - rect.left,
y : input.y - rect.top
};
}
// currently in updateImages (should not be there, but... a different story)
var pos = getMousePos(canvas.getBoundingClientRect(), mouseInput);
You've got other problems, too...
You're calling getMousePos and passing in game at the moment. I don't see where game is defined in your JS, so either you're making game somewhere else (begging for bugs), or it's undefined, and your app blows up right there.
You should really be building this with your console / dev-tools open, in a hands-on fashion, and cleaning bugs in each section, as you go.