I am using the following codes to draw a line to html canvas. But unfortunately i am not seeing any line in the canvas. I am not finding any error even.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<br> <br> <br>
<input id="start" type="button" value="Start" onclick="startstop()" />
<input type="button" value="Turn Left" />
<input type="button" value="Turn Right" />
<br> <br>
<canvas id="Canvas" style="width:800px; height: 600px; border: 1px solid black;"> </canvas>
<script>
function startstop(){
var elem = document.getElementById("start");
if (elem.value==="Start")
{
elem.value = "Stop";
var mycanvas=document.getElementById("Canvas");
// alert(mycanvas);
var ctx=mycanvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,400);
ctx.lineTo(200,400);
ctx.lineWidth=10;
ctx.strokeStyle="#ff0000";
ctx.stroke();
}
else
elem.value = "Start";
}
</script>
</body>
Here is the jsfiddle of the code http://jsfiddle.net/8ebLLwa9/
Can anyone help me too find the mistake?
Your canvas height/width should be properties on the canvas itself, not a style attribute:
<canvas id='Canvas' width="800px" height="600px" style="border: 1px solid black;"></canvas>
Also, for your jsfiddle, change the loading state from "onLoad" to "No wrap - in head"
Define your canvas using the attributes width and height insetad of the css styles:
<canvas id='Canvas' width='800' height='600' style="border: 1px solid black;"> </canvas>
Related
I have this piece of code:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.addEventListener('load', () => {
document.getElementById("c").width = document.documentElement.clientWidth;
document.getElementById("c").height = document.documentElement.clientHeight;
})
</script>
</head>
<body style="margin: 0;">
<canvas id="c" style="background-color: red;"></canvas>
</body>
</html>
Why it generates canvas bigger than browser viewport, and makes scrollbar? And beside that it makes some white space below canvas. Why and how to solve it?
Thanks!
By default canvas display are set to display: inline;
You just have to set your canvas display to display: block;
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.addEventListener('load', () => {
document.getElementById("c").width = document.documentElement.clientWidth;
document.getElementById("c").height = document.documentElement.clientHeight;
})
</script>
</head>
<body style="margin: 0;">
<canvas id="c" style="background-color: red; display: block;"></canvas>
</body>
</html>
I am trying to draw a simple line on but it doesn't work on the page. I have placed my JavaScript in several places on the html page, but it still doesn't work.
Does anyone know what I did wrong?
Thank you
My JavaScript code:
function drawLine() {
var c = document.getElementById("line");
var draw = c.getContext("2d");
draw.beginPath();
draw.lineWidth("5");
draw.strokeStyle("blue");
draw.moveTo(0, 75);
draw.lineTo(0, 75);
draw.stroke();
}
My Html code:
<!DOCTYPE html>
<html lang="eng">
<script type="text/javascript" src="vhw.js"></script>
</head>
<body>
<script type="text/javascript" src="vhw.js"></script>
<!-- INTRODUCTION -->
<div>
<h1 class="intro">
Line
</h1>
</div>
<!-- LINE CODE -->
<div class="space">
<canvas id="line" width="500" height="300" style="border: 2px dotted #990099; display: block; margin-right: auto; margin-left: auto;" onload="drawLine()">
</canvas>
</div>
</body>
</html>
call drawLine methode from onload of window not from canvas element :
window.onload = function(e){
drawLine();
}
and your html code like this :
<div class="space">
<canvas id="line" width="300" height="150" style="border: 2px dotted #990099;
display: block; margin-right: auto; margin-left: auto;" >
</canvas>
</div>
also your drawLine :
function drawLine() {
var canevas = document.getElementById('line');
if (canevas.getContext) {
var c = document.getElementById("line");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();
}
}
this is my code, i use two canvas to drawimage to avoid flickering, but i cant get the full image when use this way, anyone can help please?
if i only use one canvas the image display fine, it seems the secondarycanvas that created by Javascript got some issue to display the image, but i can't find what's wrong. any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.weight=c.weight;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src=imageEncoder[24].background;
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>
I change secondaryCanvas.weight=c.weight; to secondaryCanvas.width=c.width; and your code seems to work now.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Decorate</title>
</head>
<body>
<div class="content-box">
<canvas id="canvas" width="360" height="740" style="border:1px solid #d3d3d3"></canvas>
</div>
<script>
var c=document.getElementById("canvas");
var ctx = c.getContext("2d");
var secondaryCanvas=document.createElement("canvas");
var secondaryCtx=secondaryCanvas.getContext("2d");
secondaryCanvas.width=c.width;
secondaryCanvas.height=c.height;
var bgimg=new Image();
bgimg.src= "https://picsum.photos/360/740"
bgimg.onload=function() {
secondaryCtx.drawImage(bgimg, 0, 0);
ctx.drawImage(secondaryCanvas,0,0);
}
</script>
</body>
</html>
I tried to create a dynamic P element with the margin-left as 33px.But it is not working. But the same is working fine when the left is not used(margin) and with static html p element. Why is it so? I've tried with the IE11 and Chrome Version 60.0.3112.113.
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<meta charset="utf-8">
</head>
<body>
<div id="screenv" style="border:1px solid black;margin: 5px;padding: 5px;width: 300px;height: 300px;"></div></br>
<input id="tb" type="text" style="border:1px solid black;margin: 5px;padding: 5px;width: 300px;" placeholder="Enter your text"></input>
<button onclick="submit()">Submit</button>
<p style="margin-left:33px;">hello</p>//css works fine
<script type="text/javascript">
var you="",screen="",msg="",c_time="",val="",d,h,m,line;
function submit() {
val=document.getElementById("tb").value;
screen=document.getElementById('screenv');
you=document.createElement("div");
you.innerHTML="You:";
screen.appendChild(you);
c_time=document.createElement("p");
d = new Date();
h = d.getHours();
m = d.getMinutes();
c_time.innerHTML = h+":"+m;
c_time.style.display="inline";
c_time.style.color="grey";
msg=document.createElement("p");
msg.innerHTML=val;
msg.style.margin-left="33px";//not working
line=document.createElement("br");
you.appendChild(c_time);
you.appendChild(line);
you.appendChild(msg);
document.getElementById("tb").value="";
}
</script>
</body>
</html>
msg.style.margin-left="33px"; will be interpreted as subtract operator by the Parser. Thus, all CSS properties with dashes are written in camelCase within Javascript.
In this snippet of code, even though I align the text far outside of the canvas boundaries, the text shows up below the canvas height. I'm new to HTML and I question why using a canvas seems to block the whole row it's on. I also want to know if there is a way around this, so I can have my canvas and have the text to the right of it on the same row.
<!DOCTYPE html>
<html>
<canvas id= "myCanvas" width="600" height="600">
</canvas>
<head>
<title>test</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<p style="text-align:right">JavaScript can change the content of an HTML element:</p>
</body>
</html>
<!DOCTYPE html>
<html>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</canvas>
<head>
<title>test</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<p style="text-align:right; display: inline-block;">JavaScript can change the content of an HTML element:</p>
</body>
</html>
First your code is some wrong, you need to follow a structure.
<!DOCTYPE html>
<html>
<head>
<!-- Code -->
</head>
<body>
<!-- Code -->
</body>
</html>
Your canvas you need to write inside body tag.
You have many options but each options have differences, depend of what you want to do after, you can to choose :
float, inline, inline-block or inline-flex
Float:
This is the old form, that make an element float.
<canvas style="float:left; border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="text-align:right">JavaScript can change the content of an HTML element:</p>
Inline:
Element in one line but doesn't respect the width and height property of the element.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline;">JavaScript can change the content of an HTML element:</p>
Inline-block:
Element in one line respecting the width and height property of the element.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline-block;">JavaScript can change the content of an HTML element:</p>
Inline-Flex:
Introduced in css3, inline in version flex.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline-flex;">JavaScript can change the content of an HTML element:</p>
The definitions are very quickly, refer more information:
Reference 1
Reference 2
Update:
Align in the top, using flex:
<div style="display:flex;align-self: flex-start">
<canvas style="border:1px solid red;" id= "myCanvas" width="100" height="100">
</canvas>
<p style="margin-top:0">JavaScript can change the content of an HTML element:</p>
</div>