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.
Related
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>
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
}
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>
Good day,
I have a problem with the canvas. I'm using boostrap and I'd like to show some graphics. I have this:
<div id="charts" class="tab-pane fade">
<div class="container-fluid-charts onload="init();">
<div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div>
<canvas id="chart1">Your browser cannot display the charts...</canvas>
</div>
</div>
The Javascript is composed like this:
function init() {
var c = document.getElementById("chart1");
var ctx1 = c.getContext('2d');
drawChart1();
}
function drawChart1() {
ctx1.moveTo(ctx.canvas.width / 2 , 0);
ctx1.lineTo(0, ctx.canvas.height);
ctx1.stroke();
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
ctx1.font = "30px Arial";
ctx1.fillText("Hello World",10,50);
}
I have no errors showing and the canvas is empty. I think it's related to the DOM... Anyone can help me please ?
You declare the local variable var ctx1 = ... within the context of the init() function. You cannot access it outside that function. Thus, accessing ctx1 within drawChart1() fails.
Also, within drawChart1(), you are accessing a ctx variable which hasn't been declared anywhere.
You are missing a quote closing the class="... attribute.
Also, the <div> element doesn't support the onload attribute: How to add onload event to a div element?
A better solution is to pass the context ctx as a parameter to the drawChart1(ctx) function. Placing your script below all relevant DOM elements makes the onload handler superfluous:
<div id="charts" class="tab-pane fade">
<div class="container-fluid-charts">
<div id="container1" style="width: 100%; height: 400px; margin: 0 auto;border: 1px solid black;background-color: white;"></div>
<canvas id="chart1">Your browser cannot display the charts...</canvas>
</div>
</div>
<script>
function drawChart1(ctx) {
ctx.moveTo(ctx.canvas.width / 2, 0);
ctx.lineTo(0, ctx.canvas.height);
ctx.stroke();
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
}
var c = document.getElementById("chart1");
var ctx = c.getContext('2d');
drawChart1(ctx);
</script>
I am learner html5 canvas
When I try to draw 2 circle (a circle within a circle).
When I draw a circle and fill it, it works.
when I draw second circle and fill it. it turns into first circle with second fill style.
What I try to create is a orange circle in a grey circle.
I tries many time to solve this but by each way it get problem..
Please check my code and let me know if i am wrong or what to do to fix this problem.
I have following code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>
<style>
body{
}
#mycanvas{
border:1px solid #000;
margin:0px auto;
display:block;
}
#mycanvas1{
border:1px solid #000;
margin:0px auto;
display:block;
}
</style>
<body>
<canvas id="mycanvas" width="200" height="200">
Your browser does not support the HTML5 canvas tag.
</canvas>
<canvas id="mycanvas1" width="200" height="200">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c = document.getElementById("mycanvas");
var b = document.getElementById("mycanvas1");
var d = document.getElementById("mycanvas1");
var ctx = c.getContext("2d");
var ctx1 = b.getContext("2d");
var ctx2 = d.getContext("2d");
ctx.fillStyle = "#bddfb3";
ctx.fillRect(0,0,200,200);
ctx.moveTo(0,0);
ctx.lineTo(200,200);
ctx.stroke();
ctx1.fillStyle = "#f1b147";
ctx1.arc(100,100,80,0,360);
ctx1.fill();
ctx2.fillStyle = "#222";
ctx2.arc(100,100,50,45,180);
ctx2.fill();
ctx1.fillStyle="#fff";
ctx1.font="72px Arial";
ctx1.fillText("i",90,125);
</script>
</body>
</html>
This is a easy way to draw a orange circle inside a grey circle on canvas.
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
// orange circle
ctx.beginPath();
// centerX, centerY, radius, start angle, end angle, counterclockwise
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'orange';
ctx.fill();
// grey circle
ctx.lineWidth = 25;
ctx.strokeStyle = 'grey';
ctx.stroke();
<canvas id="canvas" width="500" height="250"></canvas>