This question already has answers here:
How to stop a requestAnimationFrame recursion/loop?
(6 answers)
Closed 1 year ago.
little question. After googling how to do this for 8 hours a day, nothing. Please let me know how to stop a requestAnimationFrame: simply, just temporarily pause the animation:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<head>
<title>Parking Master LVL. 1</title>
</head>
<body>
<h3 id="header-style">Parking Master</h3>
<p class="paraGraph1">How to play:</p>
<ol id="directions">
<p>1. drive into the Green Outlined Square</p>
<p>2. do not crash through the process or the game ends!</p>
<p>3. press "<span><button style="position: relative;
top: -3px;
color: #11fc05;
border: 2px double #11fc05; width: 1.2em; height: 1.2em;"><span style="position: absolute; left: 4px;top: 0px; font-size: 0.6em;">Park</span></button></span>" when you parked in the correct spot.</p>
</ol>
</body>
<link rel="stylesheet" href="style.css">
<!--Game-->
<canvas id="myCanvas" width="600" height="400"
style="border:2px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<button style="position:absolute;left:550px;top:600px;" class="buttonDrive" onmousedown="mouseDown()" onmouseup="mouseUp()">Drive</button>
<button class="buttonPark" onclick="parkDetector()" style="position: absolute;left: 550px; top: 540px;"><strong>Park</strong></button>
<div id="Car-Body">
<script>
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
x = 0,
last = performance.now();
function draw(timestamp) {
requestAnimationFrame(draw);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(x, 20, 20, 20);
ctx.fillStyle = "#000000";
ctx.fill();
x += (timestamp - last) / 10;
last = timestamp;
}
</script>
</div>
<script>
var continueAnimating=true;
var carBody = document.getElementById("Car-Body");
// detect if car is parked
function parkDetector() {
if (carBody > 0) {
// If the car Parked in the correct spot
carIsParked();
}
}
// If the car is not parked in the correct spot
if (carBody < 176) {
function carIsNotParked() {
alert("Hmm... it doesn't seem like you parked!");
}
}
function carIsParked() {
alert("You Parked!");
document.body.innerHTML+=p;
document.body.innerHTML+='<button onclick="nextLevel()">Next Level</button>';
}
// Direct the car
var p = '<div></div>';
// Redirect to Next Level
function nextLevel() {
document.getElementsByClassName().innerHTML = 'Next Level';
}
function mouseUp() {
console.log('wow'); // if the "Drive" button is let go of, cancel the animation
}
function mouseDown() {
requestAnimationFrame(draw); // if "Drive" is pressed, draw the animation
}
</script>
Basically when the mouseDown Is functioned, it should trigger the requestAnimationFrame, which it does, but when mouseUp Event is triggered, it should stop the animation. I am new to javascript, and never did jQuery, please help.
You can use cancelAnimationFrame() to stop the animation. You can assign requestAnimationFrame() to a variable and then to stop the animation call that variable in the cancel function. You also don't need to call requestAnimationFrame() in the mouseDown function since just calling draw() will trigger it to be activated.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<head>
<title>Parking Master LVL. 1</title>
</head>
<body>
<h3 id="header-style">Parking Master</h3>
<p class="paraGraph1">How to play:</p>
<ol id="directions">
<p>1. drive into the Green Outlined Square</p>
<p>2. do not crash through the process or the game ends!</p>
<p>3. press "<span><button style="position: relative;
top: -3px;
color: #11fc05;
border: 2px double #11fc05; width: 1.2em; height: 1.2em;"><span style="position: absolute; left: 4px;top: 0px; font-size: 0.6em;">Park</span></button></span>" when you parked in the correct spot.</p>
</ol>
</body>
<link rel="stylesheet" href="style.css">
<!--Game-->
<canvas id="myCanvas" width="600" height="400" style="border:2px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<button style="position:absolute;left:550px;top:600px;" class="buttonDrive" onmousedown="mouseDown()" onmouseup="mouseUp()">Drive</button>
<button class="buttonPark" onclick="parkDetector()" style="position: absolute;left: 550px; top: 540px;"><strong>Park</strong></button>
<div id="Car-Body">
<script>
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
x = 0,
last = performance.now(),
animate;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(x, 20, 20, 20);
ctx.fillStyle = "#000000";
ctx.fill();
x += 0.5;
animate = requestAnimationFrame(draw);
}
</script>
</div>
<script>
var continueAnimating = true;
var carBody = document.getElementById("Car-Body");
// detect if car is parked
function parkDetector() {
if (carBody > 0) {
// If the car Parked in the correct spot
carIsParked();
}
}
// If the car is not parked in the correct spot
if (carBody < 176) {
function carIsNotParked() {
alert("Hmm... it doesn't seem like you parked!");
}
}
function carIsParked() {
alert("You Parked!");
document.body.innerHTML += p;
document.body.innerHTML += '<button onclick="nextLevel()">Next Level</button>';
}
// Direct the car
var p = '<div></div>';
// Redirect to Next Level
function nextLevel() {
document.getElementsByClassName().innerHTML = 'Next Level';
}
function mouseUp() {
console.log('wow');
cancelAnimationFrame(animate) // if the "Drive" button is let go of, cancel the animation
}
function mouseDown() {
draw();
// if "Drive" is pressed, draw the animation
}
</script>
You can change those functions like that :
var shouldDraw=false //Defines a new variable that will allow to draw or not
function draw(timestamp) {
if(!shouldDraw) return //Test if you should draw or not, if it is equal to true, the draw function continues as it should, otherwise it stops and isn't called again
requestAnimationFrame(draw);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
//The rest of your function...
}
function mouseUp() {
console.log('wow'); // if the "Drive" button is let go of, cancel the animation
shouldDraw=false //Says that you don't draw anymore
}
function mouseDown() {
shouldDraw=true //Says that you can draw now
requestAnimationFrame(draw); // if "Drive" is pressed, draw the animation
}
Related
I'm trying to draw a rectangle when the user presses a button in Javascript. If the code in the script is not in a function, it draws the rectangle but of course doesn't respond to the button. If I put it in a function called by the button, nothing happens whether it's in the head or the body. How can I draw the rectangle with the button press?
Many thanks in advance!
<html>
<head>
<title>Test 4</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="600">
<p>Fallback content for browsers that don't support the canvas tag.</p>
</canvas>
<script>
function myFunction() {
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(255, 255, 255)';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.fillRect(50, 50, 100, 150);
}
</script>
<p>
Click the button
<button onclick="myFunction()">Try it</button>
</p>
</body>
</html>
Change your query selector to #myCanvas.
A prefix of . indicates it should find an element with a class of myCanvas, to search instead for an element id use the # prefix.
I use canvas and draw a closed area and want the area to fill by some color. Here is how I do it. I draw closed area with lines
I draw line (1)
Next line (2) starts from end of the previous one
Last line (3) starts from end of line (2) and ends at the start of line (1)
So as result I have closed area and want to fill by some color
Here is the chunk of code I used:
context.fillStyle = '#8ED6FF';
context.fill();
But it not works. Неre is the code I use to accomplish the task.
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="978" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
// line (1)
context.moveTo(10, 10);
context.lineTo(190, 190);
// line (2)
context.moveTo(190, 190);
context.lineTo(200, 280);
// line (3)
context.moveTo(200, 280);
context.lineTo(10, 10);
// here I try fill the area by color
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
</script>
</body>
</html>
I found the solution.
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="978" height="900"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
context.moveTo(70, 70);
context.lineTo(290, 290);
context.lineTo(300, 380);
context.closePath()
context.fillStyle = '#8ED6FF';
context.fill();
context.stroke();
</script>
</body>
</html>
I want a draw something canvas tag , when i put in div it doesnt work. I taked this code from github. it isnot working within div.
github url => https://github.com/GeekLaunch/simple-drawing-web-app
how can i do this ? actually i dont know canvas library. but this codes enough for me. In my project i use bootstrap css library.
var canvas, ctx,
brush = {
x: 0,
y: 0,
color: '#000000',
size: 10,
down: false,
},
strokes = [],
currentStroke = null;
function redraw() {
ctx.clearRect(0, 0, canvas.width(), canvas.height());
ctx.lineCap = 'round';
for (var i = 0; i < strokes.length; i++) {
var s = strokes[i];
ctx.strokeStyle = s.color;
ctx.lineWidth = s.size;
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var j = 0; j < s.points.length; j++) {
var p = s.points[j];
ctx.lineTo(p.x, p.y);
}
ctx.stroke();
}
}
function init() {
canvas = $('#draw');
ctx = canvas[0].getContext('2d');
function mouseEvent(e) {
brush.x = e.pageX;
brush.y = e.pageY;
currentStroke.points.push({
x: brush.x,
y: brush.y,
});
redraw();
}
canvas.mousedown(function (e) {
brush.down = true;
currentStroke = {
color: brush.color,
size: brush.size,
points: [],
};
strokes.push(currentStroke);
mouseEvent(e);
}).mouseup(function (e) {
brush.down = false;
mouseEvent(e);
currentStroke = null;
}).mousemove(function (e) {
if (brush.down)
mouseEvent(e);
});
$('#save-btn').click(function () {
window.open(canvas[0].toDataURL());
});
$('#undo-btn').click(function () {
strokes.pop();
redraw();
});
$('#clear-btn').click(function () {
strokes = [];
redraw();
});
$('#color-picker').on('input', function () {
brush.color = this.value;
});
$('#brush-size').on('input', function () {
brush.size = this.value;
});
}
$(init);
body {
margin: 0;
}
.top-bar {
display: flex;
flex-direction: row;
background-color: #3af;
border-bottom: 2px solid black;
position: absolute;
width: 100%;
}
.top-bar * {
margin: 5px 10px;
}
#draw {
display: block;
}
:<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top-bar">
<button id="save-btn">Save</button>
<button id="undo-btn">Undo</button>
<button id="clear-btn">Clear</button>
<input type="color" id="color-picker"></input>
<input type="range" id="brush-size" min="1" nax="50" value="10"></input>
</div>
<div style="border:1px solid red;width:500px;height:500px;margin:auto;">
<canvas id="draw" style="border:1px solid red;"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="draw.js"></script>
</body>
</html>
From my observation, the save button is not working on chrome. Because apparently Google Chrome has removed support for top-frame navigation, you can see more informations here: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM
You may try to render the canvas data to an iFrame.
Add below function to your draw.js file:
function debugBase64(base64URL){
var win = window.open();
win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
}
Now run the function when click event occurred.
$('#save-btn').click(function () {
debugBase64(canvas[0].toDataURL());
});
Hope it works !
I'm trying to develop a clone of the online web app Patatap and I want to display the instructions for 5 seconds to the user when they load the page and then have the page fade out.
This is what I have so far:
HTML:
<body>
<canvas id="myCanvas" resize></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "white";
context.font = "regular 40px Questrial";
context.textAlign = "center";
context.fillText("Press 'a-z' keys to play a tune!", canvas.width/2, canvas.height/2);
var fade_out = function() {
$("#context").fadeOut().empty();
}
setTimeout(fade_out, 5000);
</script>
</body>
CSS:
canvas {
width: 100%;
height: 100%;
background-color: black;
}
body, html {
height: 100%;
margin: 0;
}
I can't figure out why my text isn't displaying and fading out, I'm new to Javascript so any help/suggestions will be greatly appreciated.
Many thanks!
$("#context").fadeOut() is looking for an element with an id of 'context'. There's no such element. Your canvas has an id of 'myCanvas'. So try $("#myCanvas").fadeOut(). Also, at least in a test, the background is white so drawing text in white doesn't show up. What's below works, with the fillStyle changed to red:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "regular 40px Questrial";
context.textAlign = "center";
context.fillText("Press 'a-z' keys to play a tune!", canvas.width/2, canvas.height/2);
var fade_out = function() {
$("#myCanvas").fadeOut();
}
setTimeout(fade_out, 5000);
</script>
</body>
I have a problem displaying two canvases on top of each other.
I'm using the ionic framework and easeljs to draw on one canvas. Now I want to also be able to see a cursor of varying size and color when using a mouse (not in-app of course), so I though I could draw on the lower layer canvas and show the cursor on a higher layer canvas, clearing it repeatedly on mouse move.
I have an ionic on-drag event, an on-touch event (both to draw) and an angujarjs ng-mousemove (for the cursor). I have to put all those events in the first canvas in the html file or they won't register.
The problem is that I can only see the content of that first layer. I though canvases were transparent objects so I could layer them on top of each other using a different z-index for each one.
The following is my code using ionic and easeljs, I tried to keep it as short as possible. If you run it this way you can only draw, but you don't see a cursor. If you switch out the ids layer0 and layer1 it is the other way around.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Doodle</title>
<script src="ionic.bundle.js"></script>
<script src="easeljs-0.8.1.combined.js"></script>
<script type="text/javascript">
angular.module('starter', ['ionic'])
.controller('DrawCtrl', function($scope) {
var canvas, stage;
var drawingCanvas;
var oldPt;
var oldMidPt;
canvas = document.getElementById("layer0");
//check to see if we are running in a browser with touch support
stage = new createjs.Stage(canvas);
stage.autoClear = false;
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
createjs.Ticker.setFPS(24);
drawingCanvas = new createjs.Shape();
stage.addChild(drawingCanvas);
$scope.downEvent = function() {
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt.clone();
};
$scope.dragEvent = function() {
//draw on layer0, don't clear
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);
drawingCanvas.graphics.clear().setStrokeStyle(10, 'round', 'round').beginStroke("#000000").moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;
stage.update();
};
$scope.mouseMove = function() {
//draw circle on canvas during mouse move, immediately clear layer1 again (like a cursor)
var ctx = document.getElementById('layer1').getContext('2d');
ctx.globalCompositeOperation = "source-over";
ctx.clearRect(0, 0, canvas.width, canvas.height);
var x = stage.mouseX;
var y = stage.mouseY;
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
};
})
</script>
</head>
<body ng-app="starter" ng-controller="DrawCtrl">
<canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()" <="" canvas="">
<canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180" <="" canvas="">
</canvas></canvas></body>
</html>
I'm just starting to learn html/javascript and would really appreciate any input!
A quick guess, but your problem is probably in your canvas HTML lines:
<canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()" <="" canvas="">
<canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180" <="" canvas="">
This bit at the end: <="" canvas=""> isn't quite valid. Replace those lines with:
<canvas id="layer0" style="z-index:0; border: 1px solid black; " width="300" height="180" ng-mousemove="mouseMove()" on-touch="downEvent($event)" on-drag="dragEvent()"></canvas>
<canvas id="layer1" style="z-index:1; border: 1px solid black; " width="300" height="180"></canvas>
And remove the 2 trailing </canvas></canvas>.