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>
Related
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>
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 source code. I use tag canvas in code HTML. I have one tag div before 11 tag Canvas and two tag div behind tag canvas. When I run the code the error occurred.
If I set property of height for canvas < 50px then arrow hidden.
And if I don't set property of heigth of canvas. When I run the code, the display: tag div MISSSSS and MOMMMMM between tag canvas. Sorry I don't post image display because I do not has the right.
I want to MISSSSSS and MOMMMMMM behind canvas.
And I want set property of height for canvas = 30px don't hidden arrow.
Live example on the JSFiddle
HTML:
<div>LOLLL</div>
<div style="height:30px;">
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_1" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="text_1" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
<canvas id="arrow_2" width="120" ></canvas>
</div>
<div>MISSSSSS</div>
<div>MOMMMM</div>
Javascript:
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
var t = setTimeout("resize()", 200);
else
resize();
function resize() {
var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var targetWidth = 800;
var targetHeight = 600;
window.resizeBy(targetWidth-innerWidth, targetHeight-innerHeight);
}
function canvas_arrow(context, fromx, fromy, tox, toy){
var headlen = 20; // length of head in pixels
var dx = tox-fromx;
var dy = toy-fromy;
var angle = Math.atan2(dy,dx);
context.moveTo(fromx, fromy);
context.lineTo(tox, toy);
context.lineWidth=2;
//context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
context.moveTo(tox, toy);
context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
}
$('document').ready(function(){
var count= parseInt($("canvas").length);
for(var i=0; i< count; i++){
var ctx= $("canvas")[i].getContext('2d');
var temp= $("canvas")[i].id;
if(temp.indexOf("text") != -1){
ctx.font="15px Times New Roman";
ctx.fillText("I Love My Mom",10,10);
}
else{
if(temp.indexOf("arrow") != -1){
ctx.beginPath();
canvas_arrow(ctx,10,10,100,10);
ctx.stroke();
}
}
}
});
I'm confused about what your goal is, but try overflow:hidden; in addition to height: 30px;
https://jsfiddle.net/9j7vx5dz/2/
I'm tryin to change color on my squares without using jquery or CSS.
How can I change simultaneously all square color?
P.s.: I'm new in HTML5+JS.
Using this code I can change square color after click on the button. But I'd like to have a button that can change all squares already presented on canvas area.
HTML
<html>
<head>
<meta charset="utf-8">
<title>Paint Canvas</title>
</head>
<body>
<div id="container">
<canvas id="imageView" width="600" height="300" onclick="createRect(red, 20,20);"/>
</div>
<input type="button" value="Green" id="green" onclick="GreenRect()">
<input type="button" value="Red" id="red" onclick="RedRect()">
<input type="button" value="clear canvas" id="clear" onclick="ImgClr()">
</body>
</html>
CSS
canvas { border: 1px solid black;}
JavaScript
var canvas = document.getElementById("imageView");
var context = canvas.getContext("2d");
function createCircle(){
}
function createRect(fillColor, w, h) {
context.fillStyle = fillColor;
x = event.pageX;
y = event.pageY;
context.fillRect(x, y, w, h);
}
function GreenRect () {
context.fillStyle= 'green';
context.stroke();
}
function RedRect () {
context.fillStyle= 'red';
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, 600, 300);
}
Canvas squares you are drawing are not "Objects" like in Javascript.
You cannot change their color, technically speaking.
What you can do, though, is redraw them all with another color. Which is what I suggest.
You have the right parameter here:
function createRect(fillColor, w, h)
So you just want to do a createRect('red', ...)