I am trying to assign the global variables mouseX, mouseY to an event listener inside a function. When I try to use the variables inside another function, they come back undefined.
I know it's probably a problem with the scope of the variables being assigned to, but have not been able to figure it out, and any simple test code I write doesn't reproduce the problem.
What is causing this?
javascript:
var mouseX, mouseY;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var bars = [];
for(var i = 0; i < 30; i++)
bars[i] = new Bar(ctx, 100+i*10, canvas.height, 5, 150);
for(var i = 0; i < bars.length; i++){
bars[i].checkMouse();
bars[i].display();
}
function Bar(ct, x, y, w, h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.y -= this.h;
this.display = function() {
ct.rect(this.x, this.y, this.w, this.h);
ct.fill();
}
this.checkMouse = function() {
//if(mouseX >= this.x && mouseX <= this.x + this.w){
//this.y = mouseY; this.h = height-mouseY;
console.log(mouseX); //////mouseX is undefined?
//}
}
}
function getMouse(event) {
mouseX = event.offsetX;
mouseY = event.offsetY;
var coords = "mouseX: " + mouseX + ", mouseY: " + mouseY;
document.getElementById('display').innerHTML = coords;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
canvas{
background-color: #e6e6e6;
position:relative;
}
</style>
</head>
<body>
<div id="display"> </div>
<canvas onmousemove="getMouse(event)" id="myCanvas" width="500" height="200">
<script src="myscript.js"></script>
</body>
</html>
as h2oooooo pointed out:
This loop was running just once:
for(var i = 0; i < bars.length; i++){
bars[i].checkMouse();
bars[i].display();
}
When it is supposed to behave like a main loop. Copying it into the getMouse() function fixed it.
In this case it's not a problem with the scopeing, but a problem with the order of execution of your code fragments.
A script file gets executed, when loaded completely. So all your definitions, the Creation of your objects and invokes the method which doesn't work in your example.
The function, in which mouseX and mouseY get initialized, gets executed in the mouseover Event of the canvas and though gets executed later.
So all in all: When your method is fired, the variables are uninitialized, because they get initialized in a function, which is executed later.
The best idea would be, to couple the execution of the method which is problematic to the execution of the getMouse function.
Please note that relying on such a global state, especially when creating such race conditions, is a very bad style, because it leads to issues like that and gets nearly unmaintainable when your project grows.
Related
I'm working on a small retro-style side-scrolling space shooter game (or, that's the theory anyway) and I've recently moved over to using IIFEs for managing my separate 'classes'.
However, most of the examples I've seen tend to use var when declaring variables, E.g, var x = 0. I'm wondering though, is it possible to use this.x = 0 and if so, are there any benefits or drawbacks?
I've tried googling it, and can't find much on the subject, which leads me to think it's a non-issue.
My classes are as follows;
var Player = function () {
// ------------------------------------------------------------------------------------------------
// PLAYER VARIABLES
// ------------------------------------------------------------------------------------------------
var w = 50;
var h = 50;
var x = 0;
var y = 0;
var color = 'white';
var projectiles = [];
// ------------------------------------------------------------------------------------------------
// BIND EVENTS TO THE GLOBAL CANVAS
// ------------------------------------------------------------------------------------------------
Canvas.bindEvent('mousemove', function(e){
y = (e.pageY - Canvas.element.getBoundingClientRect().top) - (h / 2);
});
Canvas.bindEvent('click', function(e){
createProjectile(50, (y + (h / 2)) - 10);
});
// ------------------------------------------------------------------------------------------------
// FUNCTIONS
// ------------------------------------------------------------------------------------------------
var createProjectile = function(x, y){
projectiles.push({
x: x,
y: y
})
};
var update = function(){
for(var p = projectiles.length - 1; p >= 0; p--){
projectiles[p].x += 10;
if(projectiles[p].x > Canvas.element.width)projectiles.splice(p, 1);
}
};
var render = function () {
Canvas.context.fillStyle = color;
Canvas.context.fillRect(x, y, w, h);
console.log(projectiles.length);
for(var p = 0; p < projectiles.length; p++){
Canvas.context.fillStyle = 'red';
Canvas.context.fillRect(projectiles[p].x, projectiles[p].y, 20, 20);
}
};
// ------------------------------------------------------------------------------------------------
// Exposed Variables and Functions
// ------------------------------------------------------------------------------------------------
return{
update: update,
render: render
}
}();
are there any benefits or drawbacks?
The drawbacks are that in strict mode, you will get a runtime error (because this is undefined).
In non-strict mode, this will refer to window, so this.x = ... creates a global variable (which is what you want to avoid with the IIFE in the first place I guess).
There are no benefits.
So I hit a snag while building an HTML5 canvas UI element. I want to make the circle in this toggle switch drag to the X-coordinate that the user drags it to (there's ultimately a lot more that this thing is going to have but I want to do it a step at a time!). I can output the x coordinates so I know that's working but for some reason I cannot get it to work in my animation loop to change the variable primX. Here's my code:
HTML:
<canvas id="toggle1" class="toggle" onmousemove="getCoords(event)"></canvas>
<p id="test"></p>
The CSS is irrelevant, as long as you set any width to .toggle or #toggle1
JavaScript:
var canvas=document.getElementById("toggle1");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height=cw/3;
var PI=Math.PI;
var PI2=(PI * 2);
var cx=ch/2;
var cy=ch/2;
var backStyle="#FFFFFF"
var globalID;
var lw=ctx.lineWidth=8;
var radius=ch/2-lw/2;
var half=cw/2;
var currX;
var globalID;
var mouseIsDown=false;
function getCoords(event) {
var currX = event.clientX;
document.getElementById("test").innerHTML = currX;
}
function backGround(){
if (primX > half){
Style="#00FF00";
} else {
Style="#FF0000";
};
ctx.fillStyle=backStyle;
ctx.strokeStyle=Style;
ctx.beginPath();
ctx.arc(cx+lw/2,cy,radius,(0.5 * PI),(1.5 * PI));
ctx.lineTo((cw-(ch/2)),0+lw/2);
ctx.arc((cw-(ch/2+lw/2)),cy,radius,(1.5 * PI),(.5 * PI));
ctx.lineTo(cx,ch-lw/2);
ctx.fill();
ctx.stroke();
};
function mainCir() {
if (primX > half){
Style="#00FF00";
on=true;
} else {
Style="#FF0000";
on=false;
};
ctx.beginPath();
ctx.arc(primX,cy,radius,0,PI2);
ctx.fillStyle=Style;
ctx.fill();
}
primX = cx;
function draw(){
backGround();
mainCir();
}
draw();
function animate() {
primX=currX;
globalID=requestAnimationFrame(animate);
draw();
}
$("#toggle1").mousedown(function() {
mouseIsDown=true;
});
$(document).mouseup(function() {
if(mouseIsDown){
animate();
mouseIsDown=false;
}
});
I've tried a ton of different things but nothing work. If I put a simple animation in the animate() function then that seems to work when the mouse is clicked and held on the element, such as primX++;
But I have no idea how to "animate" the circle to where it goes to the X coordinate that the user drags it to. I've tried a couple of different things and rearranged stuff but it just ends up either disabling animations completely or, as you can see by THIS FIDDLE the circle just disappears.
If anyone knows how to fix this issue, I'd be grateful. Thank you!
It was a little thing. In the function that get the coordinates:
function getCoords(event) {
var currX = event.clientX;
document.getElementById("test").innerHTML = currX;
}
you are declaring the currX variable. But it was alredy declared, so what you are doing is to create a new one whose scope get lost in the moment the function finish.
You want this:
function getCoords(event) {
currX = event.clientX;
document.getElementById("test").innerHTML = currX;
}
Hope it helps!
UPDATE:
There are two more details that maybe are useful for you:
First: you are getting the coordinates in the application's client area, not in the canvas. So maybe you want to add the canvas' left offset.
Second: canvas.width is the logical canvas width, different from the element.width CSS attribute. So most sure you want to make a units conversion.
Altogether:
function getCoords(event) {
currX = event.clientX - $(event.target).offset().left ;
currX = currX * (canvas.width / $(canvas).width());
if (currX < radius) currX = radius;
if (currX > canvas.width - radius) currX = canvas.width - radius;
document.getElementById("test").innerHTML = currX;
}
Here you can read more about getting mouse coordinates and here about the dimensions of a canvas.
I am trying to animate a square fading into a canvas element. When I use setInterval for my animation, everything works fine, but if I try to use setTimeout, everything falls apart. Here is my code:
http://jsbin.com/OyiRIVa/1/edit
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
/*class canvasUiElement*/
function canvasUiElement() {}
canvasUiElement.prototype = {
canvas: document.getElementById("canvas"),
context: canvas.getContext("2d")
}
/* ---------------------*/
function rectangle(x,y,length,width){
this.x = x;
this.y = y;
this.opacity = 0 ;
this.length = length;
this.width = width;
}
rectangle.prototype = new canvasUiElement();
rectangle.prototype.renderSelf = function(){
this.context.clearRect(this.x,this.y,this.length,this.width);
this.context.fillStyle = "rgba(0,0,255,".concat(this.opacity.toString().concat(")"));
this.context.fillRect(this.x,this.y,this.length,this.width);
}
rectangle.prototype.drawFrame = function(){
this.opacity += .01;
this.renderSelf();
x = this.drawFrame;
setTimeout(function(){x()}, 5);
}
rect = new rectangle(20,10,50,50);
rect.drawFrame();
/*window.setInterval(function() {
rect.drawFrame();
}, 1); */
The problem probably lies in the this keyword in drawFrame. When the setTimeout fires, this in side is no longer rect.
The solution is using apply or call.
f.apply(self) bind the this keyword in function f to the first argument f.
So change this way:
rectangle.prototype.drawFrame = function draw(){
var self = this;
this.opacity += 0.005;
this.renderSelf();
if (this.opacity < 1) {
requestAnimationFrame(function(){
draw.call(self)
});
}
};
check out this JSBin. http://jsbin.com/OwaHALUF/4/edit
========================
edited upon a valid comment:
x in the original code is not semantic and misses var declaration. Fixed.
prefer requestAnimationFrame to setTimeout
stop call drawFrame if opacity >= 1 (useful if requestAnimationFrame is not availlable)
prefer named function expression over re-assignment. It reduces closure overhead.(This overhead may be not neglected if the animation lasts long enough). And more concise code is bonus.
I have a small program that I am supposed to write that makes a bouncy ball in a canvas. I can get a wireframe of a ball bouncing, but can't seem to get the setTimeout to fire at all. I have read, read and read about the function, but can't figure this out (new).
<!DOCTYPE HTML>
<html>
<head>
<title>basic Canvas</title>
<style>
#canvas1{
border:1px solid #9C9898;
}
body{
margin:0px;
padding:0px;
}
</style>
<script>
function drawMe(){
//Set x,y,radius
var x = 60;
var y = 60;
var radius = 70;
drawLoop(x,y,radius);
}
function drawLoop(x,y,radius){
var canvas2=document.getElementById("canvas1");
var ctx=canvas2.getContext("2d");
for(i=1;i<100;i++){
if(y + radius >= canvas2.height){
d = 1;
}
if(y - radius <= 0){
d = 0;
}
if (d==0){
x = x + 10;
y = y + 10;
}
else if (d==1){
x = x + 10;
y = y - 10;
}
draw(x,y,radius);
window.setTimeout(function() {draw(x,y,radius)},3000);
}
}
function draw(x,y,radius){
var canvas2=document.getElementById("canvas1");
var ctx=canvas2.getContext("2d");
ctx.beginPath();
ctx.arc(x,y,radius,0,2*Math.PI,false);
var gradient = ctx.createRadialGradient(x, y, 1, x, y, radius);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1,"white");
ctx.fillStyle=gradient;
ctx.lineWidth=1;
ctx.strokeStyle="blue";
ctx.fill();
ctx.stroke();
}
</script>
</head>
<body onload="drawMe()">
<canvas id="canvas1" width=1000" height="400">
</canvas>
</body>
</html>
A little function called 'drawMe()' which sets x, y, and radius, then calls a little drawing loop that fires 100 times that draws the bouncy ball ('drawLoop'). at the bottom of the function drawLoop, I call draw, which actually drawls the circles. From what I've read, the line 'setTimeout(function(){draw(x,y,radius)};,3000); should call the draw function every three seconds. But it doesn't. What the heck am I doing wrong?
setTimeouts are counted from the time they are created. The loop runs almost instantly and creates the setTimeouts at almost the same time. They are then all ran 3 seconds later.
One way to get around this is in the solution below. This does not increment the loop until the current timeout has been completed.
http://jsfiddle.net/x8PWg/14/
This is only one of the many potential solutions to this.
I tried both of these in canvas and nothing showed, also I doubt it is even efficient :/. I am trying to make rain that comes down the screen.. Wondering what is the most efficient way of doing this. I am a beginner at animation and would really appreciate help.
I suspect that creating a rain object would be best, each with the quality of coming down the screen then coming to the top and then an array with them...maybe with random x values withing the canvas width and y values of 0 but I don't know how to implement that. Please help!
xofRain = 20;
startY = 0;
ctx.beginPath();
ctx.moveTo(xofRain, startY);
ctx.lineTo(xofRain, startY + 20);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
function rain(xofRain){
startY = canvas.height();
ctx.moveTo(xofRain, startY);
ctx.beginPath();
ctx.lineTo(xofRain, startY + 3);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();
}
Here comes your answer, this snow rain is created using pure HTML5 Canvas, the technique used to achieve this animation is called "Double Buffer Animation". First it is good to know what is Double Buffer animation technique.
Double Buffer Technique: This is an advanced technique to make animation clear and with less flickers in it. In this technique 2 Canvas is used, one is displayed on webpage to show the result and second one is used to create animation screens in backed process.
How this will help full, suppose we have to create a animation with very high number of move, as in our Snow Fall example, there are number of Flakes are moving with there own speed, so keep them moving, we have to change position of each flake and update it on the canvas, this is quite heavy process to deal with.
So Now instead of updating each Flake directly on our page canvas, we will create a buffer Canvas, where all these changes take place and we just capture a Picture from Buffer canvas after 30ms and display it on our real canvas.
This way our animation will be clear and without flickers. So here is a live example of it.
http://aspspider.info/erishaan8/html5rain/
Here is the code of it:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Rain</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<script type="text/javascript">
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200; // Here you may set max flackes to be created
function init() {
//Canvas on Page
canvas = document.getElementById('canvasRain');
context = canvas.getContext("2d");
//Buffer Canvas
bufferCanvas = document.createElement("canvas");
bufferCanvasCtx = bufferCanvas.getContext("2d");
bufferCanvasCtx.canvas.width = context.canvas.width;
bufferCanvasCtx.canvas.height = context.canvas.height;
flakeTimer = setInterval(addFlake, 200);
Draw();
setInterval(animate, 30);
}
function animate() {
Update();
Draw();
}
function addFlake() {
flakeArray[flakeArray.length] = new Flake();
if (flakeArray.length == maxFlakes)
clearInterval(flakeTimer);
}
function blank() {
bufferCanvasCtx.fillStyle = "rgba(0,0,0,0.8)";
bufferCanvasCtx.fillRect(0, 0, bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
}
function Update() {
for (var i = 0; i < flakeArray.length; i++) {
if (flakeArray[i].y < context.canvas.height) {
flakeArray[i].y += flakeArray[i].speed;
if (flakeArray[i].y > context.canvas.height)
flakeArray[i].y = -5;
flakeArray[i].x += flakeArray[i].drift;
if (flakeArray[i].x > context.canvas.width)
flakeArray[i].x = 0;
}
}
}
function Flake() {
this.x = Math.round(Math.random() * context.canvas.width);
this.y = -10;
this.drift = Math.random();
this.speed = Math.round(Math.random() * 5) + 1;
this.width = (Math.random() * 3) + 2;
this.height = this.width;
}
function Draw() {
context.save();
blank();
for (var i = 0; i < flakeArray.length; i++) {
bufferCanvasCtx.fillStyle = "white";
bufferCanvasCtx.fillRect(flakeArray[i].x, flakeArray[i].y, flakeArray[i].width, flakeArray[i].height);
}
context.drawImage(bufferCanvas, 0, 0, bufferCanvas.width, bufferCanvas.height);
context.restore();
}
</script>
</head>
<body onload="init()">
<canvas id="canvasRain" width="800px" height="800px">Canvas Not Supported</canvas>
</body>
</html>
Also if you find this help full, accept as Answer and make it up. o_O
Cheers!!!
I'm not sure what "most efficient" is. If it was me I'd do it in WebGL but whether or not that's efficient is not clear to me.
In either case I'd try to use a stateless formula. Creating and updating state for every raindrop is arguably slow.
const ctx = document.querySelector("canvas").getContext("2d");
const numRain = 200;
function render(time) {
time *= 0.001; // convert to seconds
resizeCanvasToDisplaySize(ctx.canvas);
const width = ctx.canvas.width;
const height = ctx.canvas.height;
ctx.fillStyle = "black";
ctx.fillRect(0, 0, width, height);
resetPseudoRandom();
const speed = time * 500;
ctx.fillStyle = "#68F";
for (let i = 0; i < numRain; ++i) {
const x = pseudoRandomInt(width);
const y = (pseudoRandomInt(height) + speed) % height;
ctx.fillRect(x, y, 3, 8);
}
requestAnimationFrame(render);
}
requestAnimationFrame(render);
let randomSeed_ = 0;
const RANDOM_RANGE_ = Math.pow(2, 32);
function pseudoRandom() {
return (randomSeed_ =
(134775813 * randomSeed_ + 1) %
RANDOM_RANGE_) / RANDOM_RANGE_;
};
function resetPseudoRandom() {
randomSeed_ = 0;
};
function pseudoRandomInt(n) {
return pseudoRandom() * n | 0;
}
function resizeCanvasToDisplaySize(canvas) {
const width = canvas.clientWidth;
const height = canvas.clientHeight;
if (canvas.width !== width || canvas.height !== height) {
canvas.width = width;
canvas.height = height;
}
}
body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
<canvas></canvas>
Note that I could have used ctx.moveTo(x, y); ctx.lineTo(x, y + 8); for each line and then at the end of the loop called ctx.stroke(). I didn't do that because I'm assuming it would be less efficient than using ctx.fillRect. In order for the canvas to draw lines it actually has to allocate a dynamic path (you call ctx.beginPath). It then has to record all the lines you add. Then it has to expand those lines into vertices of various kinds to rasterize the lines. You can basically see the various algorithms it uses here. Conversely none of that has to happen with ctx.fillRect. No allocations have to happen (not saying they don't happen, just saying they don't have to). The canvas can just use a single pre-allocated quad and draw it on the GPU by passing the correct matrix to draw whatever rectangle you ask of it. Of course they're might be more overhead calling ctx.fillRect 200 times rather than ctx.moveTo, ctx.lineTo 200s + ctx.stroke once but really that's up to the browser.
The rain above may or may not be a good enough rain effect. That wasn't my point in posting really. The point is efficiency. Pretty much all games that have some kind of rain effect do some kind of stateless formula for their rain. A different formula would generate different or less repetitive rain. The point is it being stateless.