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'm trying to use an input into a search bar (length (in the code)) to draw a line of 'length' length.
I've set up a very rough canvas area, the search/variable input but can't seem to link them together. Currently, I have the variable in the lineTo direction and it does plot, but only remains static even if the variable is updated.
function myFunction() {
var length = document.getElementById("myText").value;
}
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(100,25);
ctx.lineTo(length,25);
ctx.stroke();
<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
The canvas interaction commands run once. To redraw each time, place the code inside the myFunction:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function myFunction() {
var length = document.getElementById("myText").value;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(100, 25);
ctx.lineTo(length, 25);
ctx.stroke();
ctx.closePath();
}
myFunction();
<canvas id="myCanvas" width="500" height="50" style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText" value="Size...">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
I recommend
<canvas id="myCanvas" width="500" height="50"
style="border:1px solid #d3d3d3;">
</canvas>
<input class="search" type="number" id="myText">
<button class="button" onclick="myFunction()">Size</button>
<p id="demo"></p>
I removed "value="Size..."" I don't know if you had more intentions with that
var canvas = document.getElementById("myCanvas");
function myFunction() {
var length = document.getElementById("myText").value || 100;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(length,25);
ctx.lineTo(0,25);
ctx.stroke();
}
myFunction()
I basically created this game that generates balls of random number on the screen based on the number of balls user types in to display, Then on the right side, he has to input the ball numbers in order and click verify, if he gets it right, it says "correct" otherwise it says "Sorry the correct number is " then is shows the actual order of the numbers. The problem is, whenever i click on verify, the result is always correct, even if i didn't input any number or even if the numbers r wrong. What is the mistake i am making? here r my codes: I will put a command next to the verify part of the program so it can be easier for u to locate the problem.
<html>
<head>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
window.onload=draw;
var xArr=[];
var choose;
function draw(){
var canvas= document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var id;
var x;
var y;
var r;
var i;
var balls=[{"id":1,"x":85,"y":90,"r":40},{"id":2,"x":180,"y":90,"r":40},{"id":3,"x":270,"y":90,"r":40},{"id":4,"x":360,"y":90,"r":40},
{"id":5,"x":450,"y":90,"r":40},{"id":6,"x":535,"y":90,"r":40},{"id":7,"x":623,"y":90,"r":40},{"id":8,"x":710,"y":90,"r":40},
{"id":9,"x":85,"y":190,"r":40},{"id":10,"x":180,"y":190,"r":40},{"id":11,"x":270,"y":190,"r":40},{"id":12,"x":360,"y":190,"r":40},
{"id":13,"x":450,"y":190,"r":40},{"id":14,"x":535,"y":190,"r":40},{"id":15,"x":623,"y":190,"r":40},{"id":16,"x":710,"y":190,"r":40},
{"id":17,"x":85,"y":290,"r":40},{"id":18,"x":180,"y":290,"r":40},{"id":19,"x":270,"y":290,"r":40},{"id":20,"x":360,"y":290,"r":40},
{"id":21,"x":450,"y":290,"r":40},{"id":22,"x":535,"y":290,"r":40},{"id":23,"x":623,"y":290,"r":40},{"id":24,"x":710,"y":290,"r":40},
{"id":25,"x":85,"y":390,"r":40},{"id":26,"x":180,"y":390,"r":40},{"id":27,"x":270,"y":390,"r":40},{"id":28,"x":360,"y":390,"r":40},
{"id":29,"x":450,"y":390,"r":40},{"id":30,"x":535,"y":390,"r":40},{"id":31,"x":623,"y":390,"r":40},{"id":32,"x":710,"y":390,"r":40},
{"id":33,"x":85,"y":490,"r":40},{"id":34,"x":180,"y":490,"r":40},{"id":35,"x":270,"y":490,"r":40},{"id":36,"x":360,"y":490,"r":40},
{"id":37,"x":450,"y":490,"r":40},{"id":38,"x":535,"y":490,"r":40},{"id":39,"x":623,"y":490,"r":40},{"id":40,"x":710,"y":490,"r":40},
{"id":41,"x":85,"y":590,"r":40},{"id":42,"x":180,"y":590,"r":40},{"id":43,"x":270,"y":590,"r":40},{"id":44,"x":360,"y":590,"r":40},
{"id":45,"x":450,"y":590,"r":40},{"id":46,"x":535,"y":590,"r":40},{"id":47,"x":623,"y":590,"r":40},{"id":48,"x":710,"y":590,"r":40},
{"id":49,"x":85,"y":690,"r":40},{"id":50,"x":85,"y":690,"r":40}];
var texts=[];
for(i=1;i<=balls.length;i++){
texts[i]=i;
}
var x=[];
var t=[];
var xstep=0;
choose=parseFloat(prompt("enter the number of balls u want to see"));
for (i=0; i<choose; i++) {
var b = getRandomBall();
x.push(b);
ctx.fillStyle = "#800000";
ctx.strokeStyle = "#000000";
ctx.beginPath();
xstep=xstep+120;
var ystep=90;
ctx.arc(xstep, ystep, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
ctx.fillStyle = 'black';
ctx.fillText(b.id, xstep, ystep);
console.log(i);
$(".selected").append('<label>Enter a number: </label><input type="text" name="userNumber'+i+'" id="userNumber'+i+'"><br /><br />');
}
function getRandomBall(){
var r = Math.floor(Math.random() * balls.length);
return balls.splice(r,1)[0];
}
xArr = x;
}
draw()
</script>
<body>
<div id="leftside" width="900" height="1000" style="border: 2px solid #000000">
<canvas id="canvas" width="800" height="800" style="border: 2px solid #000000">
</canvas>
<div id="rightside" width="300" height="800" style="border 2px solid #000000; float: right; margin-right:100px;">
<form action="#" method="get" >
<div class="selected"></div>
<input type="button" id="verifyBtn" value="verify">
<hr>
</form>
the result is:
<div id="result" style="font-size: 14px"></div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){ //here is the issue
for (i=0; i<choose; i++) {
$("#verifyBtn").click(function(){
if(($('#userNumber'+i).val()==xArr[i])){
$("#result").css({color:'green'});
$("#result").text("correct");
}
else{
$("#result").css({color:'red'});
$("#result").text("sorry: try again"+ " correct number was "+xArr);
}
})
}
})
</script>
</html>
I am trying to display a text on a canvas by entering a message in a textbox but it's not appearing.
Here is my code:
<html>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button onclick="clicked()">Submit</button>
<script type="text/javascript">
function clicked () {
var x = document.getElementById("form_val");
return x.value;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "25px Verdana";
ctx.fillText(clicked(), 250, 250);
</script>
</body>
</html>
The code outside of your function is triggered immediately, put it inside the function so it's called when it needs to be (as it currently stands, it calls nothing. And when you click the button, it's returning the input value to the onclick method. Try this instead:
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
HTML:
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button id='submit'>Submit</button>
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
document.getElementById('submit').addEventListener('click', clicked);
function clicked(){
var x=document.getElementById("form_val");
// Create the text when the button is clicked
ctx.fillText(x.value,250,250);
}
Fiddle.
I believe you want to do something like this
<script type="text/javascript">
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
With this, the text will be filled when clicking the button. Note: I haven't tested the code, but you might get the picture