I can't find out the problem. I can't print the word "hello" in the canvas but it seems my codes are logical. I have tried figuring the problem out for 30 minutes.
var words = ["buddha", "canoe", "dice", "elephant"];
var canvas;
var ctx;
//var timer;
var getrandomphoto = -1;
function play() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText = ("hello", 100, 100);
// getrandomphoto= getrandomnumber();
// document.getElementById("hk").src= words[getrandomphoto]+".jpg" ;
}
function getrandomnumber() {
var random_num = Math.random() * words.length;
var random_int = Math.floor(random_num);
return random_int;
}
canvas {
border: 1px solid black;
}
#message {
color: red;
}
<img id="hk" src=".jpg" alt="no photo" width="200" /></img>
<br/>
<br/>
<canvas id="myCanvas" height="200" width="500"></canvas>
<br/>
<button onclick="play()">Play</button>
<button onclick="moveleft()">←</button>
<button onclick="moveright()">→</button>
<p id="message">Press Play</p>
<p>Plate X-coordinate: <span id="plateX"></span>
<p>Word X-coordinate: <span id="wordX"></span>
<p>Distance: <span id="dist"></span>
Your issue is that ctx.fillText is a function but you're not calling it with any arguments. Thus you need to call it with arguments instead of setting it equal to ("hello", 100, 100):
ctx.fillText("hello", 100, 100);
See working example below:
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
#message {
color: red;
}
</style>
<script>
var words = ["buddha", "canoe", "dice", "elephant"];
var canvas;
var ctx;
//var timer;
var getrandomphoto = -1;
function play() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillStyle = "red";
ctx.fillText("hello", 100, 100); // change ctx.fillText = ("hello", 100, 100) to ctx.fillText("hello", 100, 100)
getrandomphoto= getrandomnumber();
document.getElementById("hk").src= words[getrandomphoto]+".jpg" ;
}
function getrandomnumber() {
var random_num = Math.random() * words.length;
var random_int = Math.floor(random_num);
return random_int;
}
</script>
</head>
<body>
<img id="hk" src=".jpg" alt="no photo" width="200" /></img>
<br/>
<br/>
<canvas id="myCanvas" height="200" width="500"></canvas>
<br/>
<button onclick="play()">Play</button>
<button onclick="moveleft()">←</button>
<button onclick="moveright()">→</button>
<p id="message">Press Play</p>
<p>Plate X-coordinate: <span id="plateX"></span>
<p>Word X-coordinate: <span id="wordX"></span>
<p>Distance: <span id="dist"></span>
</body>
</html>
Related
I'm trying to input text into a html form field (button) which will then be displayed on the same page over an image. Any advice of how I could get the two talking to each other would be really appreciated.
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img =new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 900, 600);
function myFunction() {
document.getElementById("line1").innerHTML;
var line1 = document.getElementById("line1").value;
var line2 = document.getElementById("line2").value;
var line3 = document.getElementById("line3").value;
}
//the code below positions the overlaying text on the image
ctx.font = "bold 36px Times";
ctx.fillStyle = "black";
ctx.fillText ("line1",400,325);
ctx.fillText ("line2",400,375);
ctx.fillText ("line3",400,425);
}
//this is the image
img.src= "bus_red.gif"
</script>
//the code below allows the user to input text into boxes
<div>
<form>
<label for="line1">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
<label for="line2">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line2"><br>
<label for="line3">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line3"><br>
//Click the "click-me' button to return the text on the "HTML" button
<button onclick="myFunction()">Click me</button>
</form>
</div>
Try this. For the button, the element being displayed only stays if the user keep on holding the button. Thus I changed it to a radio box where you can style it into a button.
The button has been linked with the canva and the inserted in the different textbox are being displayed respectively.
Edit: I have added a reset code to reset the canva and also styled the two "buttons".
Tested and works
<canvas id="myCanvas" width="900" height="600" style="border:1px solid #404040;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
function myFunction() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img =new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 900, 600);
}
//the code below positions the overlaying text on the image
ctx.font = "bold 36px Times";
ctx.fillStyle = "black";
ctx.fillText ( document.getElementById("line1").value ,400,325);
ctx.fillText ( document.getElementById("line2").value ,400,375);
ctx.fillText ( document.getElementById("line3").value ,400,425);
}
img.src= "images/image1.jpg"
function myFunction2() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
//this is the image
</script>
//the code below allows the user to input text into boxes
<div>
<form>
<label for="line1">Enter your text: </label>
<input type="text" autocomplete="off" id="line1" placeholder="line1"><br>
<label for="line2">Enter your text: </label>
<input type="text" autocomplete="off" id="line2" placeholder="line2"><br>
<label for="line3">Enter your text: </label>
<input type="text" autocomplete="off" id="line3" placeholder="line3"><br>
//Click the "click-me' button to return the text on the "HTML" button
<a id="input-button" onclick="myFunction()">Click me</a>
Reset
</form>
</div>
<style>
#input-button {
padding: 2em;
background-color: black;
color: #fff;
}
#input-reset {
padding: 2em;
background-color: black;
color: #fff;
text-decoration: none;
}
</style>
As mentioned in the title I want to be able to insert the text from the textbox to inside the canvas using the buttons onclick function. Now have in mind I'm a newbie at this so there may be errors all over the place.
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
this.gravity = 0.05;
this.gravitySpeed = 0;
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
function myFunction() {
}
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
<body onload="startGame()">
<input type="text" name="Box" id="Box" value="" placeholder="Write whatever"/>
<button onclick="myFunction()">Submit</button>
</body>
#sosa123, Check below solution and let me know is this solution works for you or not?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : createElementOnDom('CANVAS','myCANVAS'),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
this.gravity = 0.05;
this.gravitySpeed = 0;
document.body.insertBefore(this.canvas,document.body.childNodes[0]);
}
}
function createElementOnDom (type,id) {
var element=document.createElement(type);
element.id=id;
return element;
}
function myFunction() {
var canvas = document.getElementById("myCANVAS");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(document.getElementById("Box").value,10,50);
}
</script>
<style>
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<body onload="startGame()">
<input type="text" name="Box" id="Box" value="" placeholder="Write whatever"/>
<button onclick="myFunction()">Submit</button>
</body>
</body>
</html>
From my perspective it is better to store the methods directly under Your object myGameArea. The method can be directly invoked, and You just need to get 2D context of canvas, then fill it.
Required code sample, full code below:
<button onclick="myGameArea.myFunction()">Submit</button>
var myGameArea = {
...
myFunction : function() {
var txt=document.getElementById("Box");
var ctx=this.canvas.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText(txt.value, 10, 20);
}
}
function startGame() {
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
this.gravity = 0.05;
this.gravitySpeed = 0;
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
},
myFunction : function() {
var txt=document.getElementById("Box");
var ctx=this.canvas.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText(txt.value, 10, 20);
}
}
canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}
<body onload="startGame()">
<input type="text" name="Box" id="Box" value="" placeholder="Write whatever"/>
<button onclick="myGameArea.myFunction()">Submit</button>
</body>
I am stuck with a code and my job is to keep on adding canvas when button is clicked. this canvas should also hold a circle. Whenever a button is clicked it should result in displaying a new canvas with a circle inside beside older ones(canvas that are created earlier). Please Help.
This is my code
The two canvases created are default on page and new ones should be created upon clicking the button
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillText("Alex", 10, 50);
var d = document.getElementById("myCanvas1");
var ctx1 = d.getContext("2d");
ctx1.beginPath();
ctx1.arc(95,50,40,0,2*Math.PI);
ctx1.stroke();
ctx1.fillText("Clay", 10, 50);
</script>
<script>
function fun(){
var e = document.getElementById("myCanvas2");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
}
</script>
<br><br>
<button type="button" onclick="fun()">+</button>
</body>
</html>
Alright, so what I did was I took part of your code(for the circle), and did what you asked!
in this JsFiddle (https://jsfiddle.net/jrhvcrtm/), When you click the button, you get a new div, with the same properties as the other one, with a circle inside.
Just use this in your own code, and if you didn't realize yet, it uses jQuery in it.
Here is a snippet:
var c = document.getElementById("test");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
$('#button').click(function() {
var el = $("#test"),
newone = el.clone(true);
el.before(newone);//This line is added just for styling
});
$('#button').click(function() {
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
window.alert();
});
#test {
height:100px;
width:200px;
border: 3px solid black;
margin-left: 50px;
margin-top: 50px;
}
#button {
height:50px;
width:50px;
border: 3px solid black;
margin-left: 200px;
margin-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="button">
Click
</button>
<canvas id="test" class="test"></canvas>
Instead of var e = document.getElementById("myCanvas2"), create a new canvas, then append it to your body.
var e = document.createElement('canvas') // create new canvas
document.body.appendChild(e) // make it accessible on the DOM
var ctx2 = e.getContext("2d")
// remain the same code ...
You may also put all canvas in a <div id="canvases"></div> for a better management. Then the onclick listener will be as following code.
var e = document.createElement('canvas')
var canvasContainer = document.getElementById('canvases')
document.body.appendChild(canvasContainer)
var ctx2 = e.getContext("2d")
// remain the same code ...
I have a rectangle and a button. When the user clicks the button, I want the rectangle to get bigger. This is my code:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
var height = 150;
function myFunction(){
height = 300;
}
<button onclick="myFunction()">Click Me!</button>
<canvas id="myCanvas" width="300" height="height" style="border:1px solid #d3d3d3;"></canvas>
Although, nothing happens when I click the button. Help?
height="height" is not a valid value in html.
On click of button you can change the style.height of the canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
var height = 150;
function myFunction(){
c.style.height = '300px'; // changed here
}
DEMO
Edit
Remove the width from the html, add it through css
JS
function myFunction(){
c.style.height ='300px';
}
CSS
#myCanvas{
width:300px
}
HTML
<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas>
DEMO 2
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
function myFunction(){
c.style.height ='300px';
}
#myCanvas{
width:300px
}
<button onclick="myFunction()">Click Me!</button>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;"></canvas>
I m trying to take image from screen of live video by using canvas method. But when i press capture and press View URI button i get only blank image. I also saw this post: Javascript Canvas Blank Image but made no help.
Here is my code:
<html>
<body>
<iframe id="video" width="20%" height="419" src="http://videoplayer.vodobox.com/vodobox_player.php?vid=http://109.123.70.72:1935/live/ptvsports/samitv.m3u8&img=&play=?" frameborder="0" allowfullscreen></iframe>
<br/>
<button onClick="capture()" style="width: 64px;border: solid
2px #ccc;">Capture</button><br/>
<div id="container" style="border:none">
<canvas id="imageView" style="display:none; left: 0; top: 0; z-index: 0;border:none" width="300" height="200">
</canvas>
</div>
<div id="imgs" style="border:solid">
</div>
<script>
function getURIformcanvas() {
var ImageURItoShow = "";
var canvasFromVideo = document.getElementById("imageView");
if (canvasFromVideo.getContext) {
var ctx = canvasFromVideo.getContext("2d"); // Get the context for the canvas.canvasFromVideo.
var ImageURItoShow = canvasFromVideo.toDataURL("image/png");
}
var imgs = document.getElementById("imgs");
imgs.appendChild(Canvas2Image.convertToImage(canvasFromVideo, 300, 200, 'png'));
}
var videoId = 'video';
function capture() {
var video = document.getElementById("video");
var canvasDraw = document.getElementById('imageView');
var w = canvasDraw.width;
var h = canvasDraw.height;
var ctxDraw = canvasDraw.getContext('2d');
ctxDraw.clearRect(0, 0, w, h);
ctxDraw.drawImage(video, 0, 0, w, h);
ctxDraw.save();
getURIformcanvas();
}
</script>
</body>
</html>
output: