How to continuously move a line in html5? - javascript

I am new to HTML 5 and JavaScript. I plan to move a line automatically on my canvas until I hit the stop button. So far, I have found an example that shows how to move a line continuously. I tried to add stop button functionality to this example.
However, the line stopped moving automatically. Instead, it moves a little bit each time I press stop. In order to find the error, I checked my developer console. The console suggested that maximum call stack size has exceeded.
Additionally, I plan to have two buttons that can move the line up and down is it possible? If yes, should pass a different points array to draw function. For example, if somebody clicks left, should I pass a new array in which x coordinate is fixed but y is increasing?
I have the following code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<button type="button" id="stop">Stop</button>
<button type="button" id="left">Left</button>
<button type="button" id="right">Right</button>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function ( /* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 200;
var points = [],
currentPoint = 1,
nextTime = new Date().getTime() + 500,
pace = 150;
// make some points
for (var i = 0; i < 50; i++) {
points.push({
x: i * (canvas.width / 50),
y: 100
});
}
function draw(runAnimation) {
if (runAnimation.value) {
if (new Date().getTime() > nextTime) {
nextTime = new Date().getTime() + pace;
currentPoint++;
if (currentPoint > points.length) {
currentPoint = 0;
}
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.lineWidth = 2;
ctx.strokeStyle = '#2068A8';
ctx.fillStyle = '#2068A8';
for (var p = 1, plen = currentPoint; p < plen; p++) {
ctx.lineTo(points[p].x, points[p].y);
}
ctx.stroke();
requestAnimFrame(draw(runAnimation));
}
}
var stop = document.getElementById('stop');
var left = document.getElementById('left');
var right = document.getElementById('right');
/*
* define the runAnimation boolean as an obect
* so that it can be modified by reference
*/
var runAnimation = {
value: false
};
stop.addEventListener('click', function () {
runAnimation.value = !runAnimation.value;
if (runAnimation.value) {
requestAnimationFrame(draw(runAnimation));
}
});
left.addEventListener('click', function () {
});
right.addEventListener('click', function () {
});
</script>
</body>
</html>

Your problem is where you call requestAnimationFrame..
You have
requestAnimFrame(draw(runAnimation));
The draw(runAnimation) is calling and running the function draw, which then gets down the the same line and does the same thing, the function never gets a chance to exit and eventually the call stack overflows.
To fix change the line to
requestAnimationFrame(draw);
Now you are just passing the referance to the function draw.
As you want the runAnimation value to be passed, you can not do this with requestAnimationFrame as it already has an argument passed to the draw function. (the time)
For this case it is easier for you just to change the function declaration from
function draw(runAnimation) { // runAnimation holds the time as that
// is what requestAnimationFrame will
// pass as the first argument
Change it to
function draw(time){ // you can ignore the time as you don't need it
The variable runAnimation can still be seen inside the function as you have defined it in the same scope.
And the last change is to the stop event
stop.addEventListener('click', function () {
runAnimation.value = !runAnimation.value;
if (runAnimation.value) {
requestAnimationFrame(draw(runAnimation)); // You are calling
// draw, but you
// should just pass
// a reference.
}
});
To
stop.addEventListener('click', function () {
runAnimation.value = !runAnimation.value;
if (runAnimation.value) {
requestAnimationFrame(draw); // only the function reference is
// needed.
}
});

Related

I want to start a new animation every time I click with requestFrameAnimation

I'm having multiple issues.
Everytime I click the animation goes faster. SOLVED #Jorge Fuentes González
Everytime I click the
last animation stops moving SOLVED #Kaiido
I have changed about everything I could think of around and still the same issue. Any help would be appreciated. Thanks!
function drawFrame(frameX, frameY, canvasX, canvasY) {
ctx.drawImage(img,
frameX * width, frameY * height,
width, height,
x_click, y_click,
scaledWidth, scaledHeight);
}
// Number of frames in animation
var cycleLoop = [3, 2, 1, 0, 7, 6, 5];
// Position of sprite in sheet
var currentLoopIndex = 0;
var frameCount = 0;
function step() {
frameCount++;
if (frameCount < 30) {
window.requestAnimationFrame(step);
return;
}
frameCount = 0;
// ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFrame(cycleLoop[currentLoopIndex++], 0, 0, 0);
// Starts animation over
if (currentLoopIndex >= cycleLoop.length) {
// If you want to loop back in oposite direction after full animation
cycleLoop.reverse();
// Reseting position of which sprite to use
currentLoopIndex = 0;
}
window.requestAnimationFrame(step);
}
canvas.addEventListener("mousedown", getPosition, false);
function getPosition(event) {
x_click = event.x;
y_click = event.y;
x_click -= canvas.offsetLeft * 10;
y_click -= canvas.offsetTop * 10;
step();
}
==============================
JS Fiddle:
https://jsfiddle.net/HYUTS/q4fazt6L/9/
=======================================
Each time you click, you call step();, which will call window.requestAnimationFrame(step);, which will call step() the next animation frame. I don't see any stop point so the loop will be called forever.
So, when you call step() the first time, step() will be called continuously for ever, and if you click again, another step() "line" will be called a second time which will call window.requestAnimationFrame(step); for ever again, so now you will have two "lines" calling step(). That's why the animation goes faster, because on each animation frame step() will be called twice, doubling the calculations.
What you have to do is to check if the animation is already running (with a flag) and do not run it again, or to window.cancelAnimationFrame(ID) before starting the step() loop again. Note that on each click you must restart the variables that control the animation, like frameCount and currentLoopIndex
function drawFrame(frameX, frameY, canvasX, canvasY) {
ctx.drawImage(img,
frameX * width, frameY * height,
width, height,
x_click, y_click,
scaledWidth, scaledHeight);
}
// Number of frames in animation
var cycleLoop = [3, 2, 1, 0, 7, 6, 5];
// Position of sprite in sheet
var currentLoopIndex = 0;
var frameCount = 0;
var animationid = null;
function step() {
frameCount++;
if (frameCount < 30) {
animationid = window.requestAnimationFrame(step);
return;
}
frameCount = 0;
// ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFrame(cycleLoop[currentLoopIndex++], 0, 0, 0);
// Starts animation over
if (currentLoopIndex >= cycleLoop.length) {
// If you want to loop back in oposite direction after full animation
cycleLoop.reverse();
// Reseting position of which sprite to use
currentLoopIndex = 0;
}
animationid = window.requestAnimationFrame(step);
}
canvas.addEventListener("mousedown", getPosition, false);
function getPosition(event) {
x_click = event.x;
y_click = event.y;
x_click -= canvas.offsetLeft * 10;
y_click -= canvas.offsetTop * 10;
frameCount = currentLoopIndex = 0;
window.cancelAnimationFrame(animationid);
step();
}
First step in your situation, is to create different objects for every animatables, so they can be drawn and updated independently.
After, you will have to split your logic in several parts.
A basic setup is to have one main loop that runs constantly in the background, and which will call all higher level objects update function, then all the drawing functions.
It's in these higher level methods that you will do the checks as to whether they should actually be discarded or not. The main loop doesn't have to take care of it.
In the example below, I created a class for your animatable objects. These objects will now have their own status, and will be able to update as they wish independently of others.
With this setup, adding a new Object in the scene is just a matter of pushing it in an Array.
// Our Animatable class (ES5 style...)
// Each object as its own frameCount and its own loopIndex
function Animatable(x, y) {
this.x = x;
this.y = y;
this.frameCount = 0;
this.loopIndex = 0;
this.cycleLoop = [3, 2, 1, 0, 7, 6, 5];
}
Animatable.prototype = {
update: function() {
this.frameCount++;
if (this.frameCount < 30) {
return;
}
this.frameCount = 0;
this.loopIndex++
if (this.loopIndex >= this.cycleLoop.length) {
// If you want to loop back in oposite direction after full animation
this.cycleLoop.reverse();
// Reseting position of which sprite to use
this.loopIndex = 0;
}
},
draw: function() {
// check the image is loaded
if (!img.naturalWidth) return;
var frameX = this.cycleLoop[this.loopIndex];
ctx.drawImage(img,
frameX * width, 0,
width, height,
this.x - scaledWidth/2, this.y - scaledHeight/2,
scaledWidth, scaledHeight);
}
};
// the main anim loop, independent
function startAnimLoop() {
animloop();
function animloop() {
requestAnimationFrame(animloop);
// updates
animatables.forEach(update);
// drawings
ctx.clearRect(0,0,canvas.width, canvas.height);
animatables.forEach(draw);
}
function update(animatable) {
animatable.update();
}
function draw(animatable) {
animatable.draw();
}
}
// one image for all
var img = new Image();
img.src = 'https://imgur.com/u2hjhwq.png';
img.onload = startAnimLoop;
// here we will hold all our objects
var animatables = [new Animatable(50, 50)]; // start with a single one
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
// some constant from OP's fiddle
var scale = 1.5;
var width = 100; // Bigger numbers push left <-, smaller right ->
var height = 100;
var scaledWidth = scale * width;
var scaledHeight = scale * height;
canvas.onclick = function(evt) {
var rect = canvas.getBoundingClientRect();
var x = evt.clientX - rect.left;
var y = evt.clientY - rect.top;
// we simply create a new object ;-)
animatables.push(new Animatable(x, y));
};
canvas{border:1px solid}
<canvas id="canvas" width="500" height="500"></canvas>
window.requestAnimationFrame is still running when you click again, and when you click you add another tick per frame to your animation, doubling your speed, as step() is called two times each frame now. You should cancel the previous animation frame when clicking again, using window.cancelAnimationFrame()
https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame
Like this:
...
var animationID;
//in step() save the id in every call
function step() {
...
animationID = window.requestAnimationFrame(step);
...
}
//In getPosition cancel the current animation
function.getPosition(event) {
...
window.cancelAnimationFrame(animationId);
...
}
And if you want multiple animations running, create an object for each and make the function step() their property, then run window.requestAnimationFrame(this.step) inside of step(). You'd also have to save every variable needed for the animation like currentLoopIndex as part of the object.

Mouse position is only read on the first frame

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.

setInterval doesn't work properly

I have a image and I'm trying to animate it through setInterval() . My aim is to move the image up by a certain pixel only when the user clicks on the Canvas else the image should be moving downwards.Everything goes well but the timer increases the speed for every onclick()
my canvas tag
<canvas id="myCanvas" width="400" height="600" onclick=init()></canvas>
java script:
function init()
{
function draw1()
{
context.clearRect(0,0,400,600);
img_y = img_y - 40;
context.drawImage(image1,img_x,img_y);
}
function move()
{
context.clearRect(0,0,400,600);
img_y = img_y + 7;
context.drawImage(image1,img_x,img_y);
}
draw1();
setInterval(move,70);
}
My animation starts when the user clicks the Canvas of my game. When I click the Canvas for the second time or so,the animation speed increases. What is wrong with my logic?
Your problem is that each click ADDS an interval. So your code basically runs more times than you want (making your animation faster). Make sure to clear the interval before starting a new one. Try the following (docs):
window.myTimer = '';
function init()
{
function draw1()
{
context.clearRect(0,0,400,600);
img_y = img_y - 40;
context.drawImage(image1,img_x,img_y);
}
function move()
{
context.clearRect(0,0,400,600);
img_y = img_y + 7;
context.drawImage(image1,img_x,img_y);
}
draw1();
window.clearInterval(window.myTimer); // clear previous interval
window.myTimer = setInterval(move,70); // set it again
}
As #Pointy pointed out,, you are increasing the 'speed' every click, because you are creating a new interval which is calling that same function.
Consider either clearing the interval and making a new one each time : window.clearInterval(intervalId);
OR
implementing a bool within your function which will prevent its movement until click.
You are mixing up the code that initiates movement with the code that moves the object up. They need to be separate functions.
<canvas id="myCanvas" width="400" height="600" onclick="moveUp"></canvas>
JS:
var movement = 7, timer;
function animate() {
context.clearRect(0, 0, 400, 600);
img_y += 7;
context.drawImage(image1, img_x, img_y);
}
function moveUp() {
// no need to redraw the image here as it will be drawn at the next frame anyway
img_y -= 40;
}
function init() { // call this when you want the main animation to start
if (timer) { // if timer variable already exists
clearInterval(timer); // clear the corresponding interval
timer = null; // and also clear the variable itself
}
timer = setInterval(animate, 70);
}
(This code clears the timer before setting it, in case, for some reason, init is called more than once.)
You could also work with the onmouseup, onmousedown events, letting it move as long mouse is pressed, and stop moving when mouse is no longer pressed. This way you can create and remove the interval on both events
var interval;
function startInterval() {
interval = setInterval(animation.move.bind(animation), 70);
}
function stopInterval() {
clearInterval(interval);
}
var animation = {
old: undefined,
x: 0,
y: 0,
context: undefined,
move: function() {
this.y += 10;
animation.draw();
},
draw: function() {
if (typeof animation.context === 'undefined') {
var el = document.getElementById('ctx');
animation.context = el.getContext('2d');
}
var context = animation.context;
if (typeof animation.old !== 'undefined') {
context.clearRect(animation.old.x, animation.old.y, 10, 10);
}
animation.old = {
x: animation.x,
y: animation.y
};
context.fillStyle = "#FF0000";
context.fillRect(animation.old.x, animation.old.y, 10, 10);
}
};
<canvas id="ctx" width="300" height="300" onmousedown="startInterval()" onmouseup="stopInterval()"></canvas>

"requestAnimationFrame" method is not working

"requestAnimationFrame" method is not working in the following example. Console doesn't show any error messsage. Then what is the error in this code?
html:
<body>
<div id="container">
<canvas id="canvas" width="1024" height="1024"></canvas>
</div>
<script type="text/javascript" src = "Jquery/easy.js"></script>
</body>
javascript:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var chop1 = new Image();
chop1.src = "img/chopper.png";
var chopperX = 0;
var chopperY = 0;
var ascent = 20;
function fly()
{
chopperY += ascent;
ctx.drawImage(chop1, chopperX, chopperY, 30, 80);
requestAnimationFrame(fly);
}
window.onload = function() {
init()
};
function init()
{
chop1.src = "img/chopper.png";
ctx.drawImage(chop1, 0, 0, 30, 80);
fly()
}
;
You probably want to scale the animation using the timestamp that's passed to the callback given to requestAnimationFrame. Use something like this:
var ascent = 20;
var limit = 5000;
var start = null;
function fly(timestamp) {
if (start === null) {
start = timestamp;
}
var progress = timestamp - start;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(chop1, 0, Math.min(progress / ascent, canvas.height),
chop1.width, chop1.height);
if (progress < limit) {
requestAnimationFrame(fly);
}
}
requestAnimationFrame(fly);
You can modify ascent and limit to increase/decrease the animation's speed and final position to taste.
As others have mentioned, be sure to use the correct requestAnimationFrame:
window.requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
More information:
https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame
You need to call your draw() from within the fly() here is how I got it working with comments to explain. You'll need to change your image's src to what it is in your own project since I didn't have your image.
Edit:
Added a way to draw image based on image size and made image turn around at edges of canvas. And here is a fiddle to show it in action:
Canvas Animation
JavaScript
/**
* Namespace to set up your animation
* #namespace
*/
var anim = (function() {
var exports = {};
// Make sure we use the right "requestAnimationFrame"
// For the right browser
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
// Keep some variables for the namespace
var canvas = null, // The Canvas element to draw to
ctx = null, // The context of the canvas
chop1 = null, // The image that will get drawn
chopperX = 0, // The X position of the image
chopperY = 0, // The Y position of the image
ascent = 20; // How much to increment height by per anim
/**
* The function to get called by, and to perpetuate
* the requestAnimationFrame() function
* #returns {undefined}
*/
function fly() {
// Increment the height of the image
chopperY += ascent;
// Switch directions at bottom of canvas
if (chopperY > 1000) {
ascent = -ascent;
}
if (chopperY < 0) {
ascent = -ascent;
}
// Clear the canvas so the animation looks good
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the image to the canvas
ctx.drawImage(chop1, chopperX, chopperY, chop1.width, chop1.height);
// Get ready to draw again on the next animation frame
requestAnimationFrame(fly);
}
/**
* Function to start the animation process
* #param {Canvas DOM Element} canvasElement The canvas to draw on
* #returns {undefined}
*/
exports.go = function(canvasElement) {
// Set the canvas we draw to
canvas = canvasElement;
// Get a context to draw to
ctx = canvas.getContext("2d");
// Create the image we want to draw
chop1 = new Image();
// Set the image's source
chop1.src = "../../img/dice.png";
// Start the animation process
window.requestAnimationFrame(fly);
};
// Let our functions get called from our namespace
return exports;
}());
/**
* Function that gives the canvas element to the namespace to animate
* #returns {undefined}
*/
function init() {
anim.go(document.getElementById("canvas"));
}
/**
* Function to start the initialization on a window load
* #returns {undefined}
*/
window.onload = init;
//init();
HTML
<body>
<div id="container">
<canvas id="canvas" width="1024" height="1024"></canvas>
</div>
</body>

jQuery- Please explain to me Closure, variable context

Ok so I don't understand why Firefox is saying that the $("#canvas")[0].getContext('2d'); is undefined. I put it out of the function so that all of the function can access it but here the ctx is still undefined.
(function($) {
// Undefined
var ctx = $('#canvas')[0].getContext("2d");
var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
$(function() {
setInterval(draw, 10);
})
function draw() {
ctx.clearRect(0,0,300,300);
ctx.beginPath();
ctx.arc(x,y,10,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
x+=dx;
y+=dy;
}
})(jQuery);
However when I transferred the location of ctx to the unnamed function, the ctx is not undefined:
(function($) {
var ctx;
var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
$(function() {
//Not Undefined
ctx = $("#canvas")[0].getContext('2d');
setInterval(draw, 10);
})
function draw() {
ctx.clearRect(0,0,300,300);
ctx.beginPath();
ctx.arc(x,y,10,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
x+=dx;
y+=dy;
}
})(jQuery);
Whats wrong with the first code? I mean var ctx is declared on the top. So that would make it a global variable. Hmm the error that I got was $("#canvas")[0] is undefined. Means that it can't access the #canvas.. Why??
I think you've mistaken the problem. It is not that you have misunderstood your variable context but probably that you are running the javascript before your canvas tag has been declared.
The following code demonstrates the problem. It will display the message "canvasOne is undefined!" because we are trying to access canvasOne before it is declared (Note the placement of the <canvas> tags).
I've created a hosted demo here: http://jsbin.com/afuju (Editable via http://jsbin.com/afuju/edit)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<script>
/*
The following line of code is run as soon as the browser sees it.
Since the "canvasOne" tag is not declared yet, the variable will be undefined.
*/
var canvasOne = $('#canvasOne')[0];
$(function() {
// The following code is run after the whole document has finished loading.
if (canvasOne === undefined) {
alert('canvasOne is undefined!');
}
else {
canvasOne.getContext("2d").fillRect(5, 5, 15, 15);
}
});
</script>
<canvas id="canvasOne"></canvas>
<canvas id="canvasTwo"></canvas>
<script>
/*
The following line of code is run as soon as the browser sees it.
But since the "canvasTwo" tag *is* declared above, the variable will *not* be undefined.
*/
var canvasTwo = $('#canvasTwo')[0];
$(function() {
// The following code is run after the whole document has finished loading.
if (canvasTwo === undefined) {
alert('canvasTwo is undefined!');
}
else {
canvasTwo.getContext("2d").fillRect(5, 5, 15, 15);
}
});
</script>
<script>
$(function() {
/*
The following code is run after the whole document has finished loading.
Hence, the variable will *not* be undefined even though the "canvasThree" tag appears after the code.
*/
var canvasThree = $('#canvasThree')[0];
if (canvasThree === undefined) {
alert('canvasThree is undefined!');
}
else {
canvasThree.getContext("2d").fillRect(5, 5, 15, 15);
}
});
</script>
<canvas id="canvasThree"></canvas>
</body>
</html>
This is because in your first call you're actually creating a Function object which will be processed only after the DOM has loaded, in another context.
That anonymous function will be called when all the elements in the page have already loaded, so the caller will be a jQuery core function and its context is completely different from the one you're coding here.
I'd suggest wrapping everything inside the $() call, so this should work:
(function($) {
$(function() {
var ctx = $("#canvas")[0].getContext('2d');
var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
setInterval(draw, 10);
function draw() {
ctx.clearRect(0,0,300,300);
ctx.beginPath();
ctx.arc(x,y,10,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
x+=dx;
y+=dy;
}
});
})(jQuery);

Categories

Resources