HTML5 Canvas text not appearing - javascript

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

Related

How can a button press draw on canvas in javascript

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.

Using a variable to draw a line (canvas)

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()

verify input isn't working properly in javascript/jquery

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>

HTML5 Everything disappears after clicking a button

I'm new to html5.
I'm not sure what happened here, I'm trying to make it so whenever the button is clicked, a quadratic function appears in the canvas. But in what I wrote, whenever I click the button everything disappears right after actually plotting the requested curve.
Here's the code jsfiddle
<!DOCTYPE html>
<body>
<form action="">
a: <input type="text" name="tbax2" id="itbax2" value=0.01 size="4">
b: <input type="text" name="tbbx" id="itbbx" value=1 size="4">
c: <input type="text" name="tbc" id="itbc" value=40 size="4">
<button onclick="dibujarCurva()">Graficar</button>
</form>
<canvas id="myCanvas" width="500" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function dibujarCurva(){
var ax2 = parseFloat(document.getElementById('itbax2').value);
var bx = parseFloat(document.getElementById('itbbx').value);
var c = parseFloat(document.getElementById('itbc').value);
ctx.beginPath();
ctx.strokeStyle = '#FF0000'
x=0
ctx.moveTo(0,150-(ax2*(x-250)*(x-250) + bx*(x-250) + c));
while (x<501){
ctx.lineTo(x,150-(ax2*(x-250)*(x-250) + bx*(x-250) + c));
x=x+10
ctx.stroke();}
ctx.closePath();
}
function dibujarGrid(){
ctx.beginPath();
ctx.strokeStyle = '#F2F2F2'
ctx.moveTo(0,0);
x=0
while (x<501){
ctx.moveTo(x,0);
ctx.lineTo(x,300);
x=x+10
ctx.stroke();}
x=0
while (x<301){
ctx.moveTo(0,x);
ctx.lineTo(500,x);
x=x+10
ctx.stroke();}
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = '#000000'
ctx.moveTo(250,0);
ctx.lineTo(250,300);
ctx.stroke();
ctx.moveTo(0,150);
ctx.lineTo(500,150);
ctx.stroke();
}
dibujarGrid()
ctx.fillText(("ax^2 + bx + c"),10,20);
</script>
</body>
Seems to be trying to submit the form.
A quick and easy fix is to change your onclick as follows:
<button onclick="return dibujarCurva()">Graficar</button>
and add a
return false;
to the end of the dibujarCurva() function.
This is useful if you want to conditionally submit. However, as slicedtoad and acontell pointed out the following will also solve it without any modification to the function.
<button type="button" onclick="dibujarCurva()">Graficar</button>
You can add the type attribute of the button and prevent it from sending the form:
<button type="button" onclick="dibujarCurva()">Graficar</button>

Drawing circles to canvas using functions

<div>
<canvas id="canvas" width="250px" height="400px" style="border: 1px solid black" onload="drawCircle()"></canvas>
</div>
<script type="text/javascript" src="canvasjs.js"></script>
</body>
</html>
var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");
function drawCircle(){
ctx.fillStyle="blue";
ctx.beginPath();
ctx.arc(50,50,50,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
Just wondering if anyone can tell me why this does not draw to canvas. If I remove the code from the function it works.
You did not invoke your function.
please append this code below your codes;
drawCircle();

Categories