Error html user tag canvas - javascript

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/

Related

How to create a canvas with a circle inside it everytime a button is clicked

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 ...

Change Rectangle Height with Button

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>

Canvas: Getting blank image after pressing Button

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:

Dynamic Variable Content JavaScript

<script>
function zeigeBildGross1(Bild1){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross2(Bild2){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross3(Bild3){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
function zeigeBildGross4(Bild4){
document.getElementById("Bild1").width = 500;
document.getElementById("Bild1").height = 300;
}
</script>
<noscript>
Bitte JavaScript in Ihrem Browser aktivieren!
</noscript>
</head>
<body>
<img id="Bild1" width=300 height=200 onclick=zeigeBildGross(Bild1) src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
<img id="Bild2" width=300 height=200 onclick=zeigeBildGross(Bild2) src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
<img id="Bild3" width=300 height=200 onclick=zeigeBildGross(Bild3) src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
<img id="Bild4" width=300 height=200 onclick=zeigeBildGross(Bild4) src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>
</body>
Hello,
I want to code a website using HTML and JS, where 4 pictures are shown.
If I press on one picture, it should be resized.
Is it possible, to get a "dynamic" variable?
My idea was, to get a new variable which can have the content Bild1, Bild2, Bild3 or Bild4, depending on which picture was pressed before so there's not the same function for each case just with a different word.
For example:
function zeigeBildGross(){
var x = <!-- depending on which pic was pressed either: Bild1, Bild2, Bild3 or Bild4 !-->
document.getElementById(x).width = 500;
document.getElementById(x).height = 300;
}
Is that possible?
Thank you for reading,
Stöger
Simply deliver the id of your image to the function:
HTML:
<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this.id)">
Javascript:
function zeigeBildGross(id){
document.getElementById(id).width = 500;
document.getElementById(id).height = 300;
}
Cleaner version:
<img src="Bild1.jpg" id="Bild1" width="300" height="200" onclick="zeigeBildGross(this)">
Javascript:
function zeigeBildGross(bild){
bild.width = 500;
bild.height = 300;
}
You don't need to create a variable that contains the image being clicked, it already exists as the context in the onclick event handler.
Simply pass this as parameter to the function, and you can use that to access the element:
function zeigeBildGross(bild){
bild.width = 500;
bild.height = 300;
}
<img id="Bild1" width=300 height=200 onclick="zeigeBildGross(this)" src="http://getafteritsales.com/wp-content/uploads/2015/04/Brett-Zalaski-1.png" >
<img id="Bild2" width=300 height=200 onclick="zeigeBildGross(this)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Number_2_in_light_blue_rounded_square.svg/1024px-Number_2_in_light_blue_rounded_square.svg.png"><br>
<img id="Bild3" width=300 height=200 onclick="zeigeBildGross(this)" src="https://p3cdn2static.sharpschool.com/common/resources/images/Cliparts/Math/Number%203%20Violet.png">
<img id="Bild4" width=300 height=200 onclick="zeigeBildGross(this)" src="http://www.clker.com/cliparts/m/e/u/E/z/k/yellow-rounded-number-4-md.png"><br>

Place Div on top of video using javascript

I have several kinds of videos, like this
<video id='abd' height="200" width="200" ></video>
<embed id='bcd' height="200" width="200" ></embed>
<object id='cde' height="200" width="200" ></object>
I have calculated target position like this
<script>
var vid=document.getElementById('abd');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var div = '<div>Heloo</div>';
</script>
Now i want to put a div at position (x,y).
How can i do this. div is stored in var div, Is there any way to do this perfectly,
Your help will be greatful
Thanks
You can do this using pure CSS - no JS required!
The HTML
<div id="video-container">
<iframe width="420" height="315" src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen> </iframe>
<div class="video-overlay">
Overay Content
</div>
</div>
The CSS
#video-container {
position:relative;
width:420px;
}
.video-overlay {
position:absolute;
top:50px;
right:50px;
background:#000;
color:#FFF;
}
See it in action
http://jsfiddle.net/y28Zs/
try this
http://jsfiddle.net/miquelcamps/BJN8x/3/
html
<video id="embed" width="200" height="200" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
javascript
var vid = document.getElementById('embed');
var width = vid.width;
var height = vid.height;
var x = vid.offsetLeft;
var y = vid.offsetTop;
var div = '<div class="overlay" style="height:'+height+'px;width:'+width+'px;left:'+x+'px;top:'+y+'px;">Hello</div>';
document.body.innerHTML += div;
css
.overlay{
position:absolute;
background:red;
z-index:99;
}
Please check is it what you want :
<div id="adds">
<video id='abd' height="200" width="200" style="border:2px solid" ></video>
</div>
Javascript ----
vid=document.getElementById('abd');
addDiv =document.getElementById('adds');
var width = vid.offsetWidth;
var height = vid.height;
var x = width/2+ 'px';
var y = height - 12+'px';
var newDiv = document.createElement("div");
newDiv.innerText = "Hello....";
newDiv.style.left = "102px";
newDiv.style.top = "108px";
newDiv.style.position = "absolute";
addDiv.appendChild(newDiv);
Live demo : (http://jsfiddle.net/7EhtL/)

Categories

Resources