HTML text doesn't print to screen when using canvas in conjunction - 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>

Related

Regarding HTML5

whenever i am attaching a image in HTML5 the image size is getting so large.I gave the height and width also but it is not changing
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body> style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic>></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" alt="My Favoutite Pic">
</div>
</body>
</html>
Firstly, there is a redundant < in your body tag.
Then, you can use width and height attributes as below in the img tag to specify the image size
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style="width:250px;">
<h1>Favorite
<Pic>
</h1>
<p> This is one of the favourite pics.</p>
<img src="https://via.placeholder.com/150" alt="My Favoutite Pic" width="100" height="100">
</div>
</body>
</html>
Use the height and width image attributes, like this:
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite Pic</h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" width="150" height="150" alt="My Favoutite Pic">
</div>
</body>
</html>
Make sure to maintain the ratio of the length and width of the image, to keep the image looking good.
You are missing height and width tags on the img tag. The size of the div wont affect it. It might help if you set it to something like this
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0; background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" height="500" width="500" alt="My Favoutite Pic" >
</div>
</body>
</html>
The width and height are just an example, pick the one that is right for your image.
You had an extra ">" in your body tag. Your code should be as follows:
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic>></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" alt="My Favoutite Pic">
</div>
</body>
</html>

Getting 2 canvas images to appear with 1 button

I'm trying to get multiple canvas images to appear with 1 button press. I can get one image to work perfect, but the second one I can't. I know that ID's have to be unique and that only the first canvas will have an image currently.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div class="bg">
<img src="Assets/Images/background.png" alt="background">
</div>
<section class="content">
<img id="taxi" src="Assets/Images/PV.png" width="106" height="53">
<canvas id="myCanvas" width="106" height="53"
style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvas" width="106" height="53"
style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</section>
</body>
</html>
JS
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
}
I know that I can get it work by changing one the id="myCanvas" in the HTML and repeating the current lines in the script to get it to work. But the end web page will have lots of canvas' and I didn't want to keep repeating the javascript code.
Is there a simple way of doing what I am trying to achieve?
HTML elements cannot have the same id. You'll need to retrieve your elemnts some other way. There are many ways; getElementsByTagName, getElementsByClassName, querySelectorAll, ... etc.
Use querySelectorAll(".content > canvas"); This will select all direct children that are canvas elements in the element that has the class of "content" (which in this case is your section element).
function myCanvas() {
document.querySelectorAll(".content > canvas").forEach(c=>{
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
});
}
Basic example:
function myCanvas() {
document.querySelectorAll(".content > canvas").forEach(c=>{
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,0,0,106,53);
});
}
<section class="content">
<img id="taxi" src="https://static-s.aa-cdn.net/img/ios/899287106/45820b5b6bba46c7fcd853a46d554a34?v=1" width="106" height="53">
<canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:510px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas width="106" height="53" style="border:1px solid #d3d3d3; position:absolute; left:310px;top:117px;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</section>

image not respecting width property in IE8

Below is the code i made to recreate issue in a simpler manner
<html>
<head>
<title>test</title>
<style>
#container{
width:500px;
background-color:green;
}
table{
width:100%;background-color:blue;
}
table tr td img{
max-width:100%;
width:100%;
}
</style>
</head>
<body>
<div id="container" style="">
<table style="">
<tr>
<td><img src="http://go-grafix.com/data/wallpapers/20/green-574309-3888x2592-hq-dsk-wallpapers.jpg"/></td>
</tr>
</table>
</div>
</body>
</html>
Basically this works fine in chrome and other browsers
But in IE8, the max-width property is not obeyed. I also tried using the width property still no luck
Any suggestions?
P.S: I dont want to have it in px, i want to have it in % only
Here is the fiddle link
Try by giving width and height properties inline
<img width="100" height="100"/>
or
<img style="width:100;height:100"/>
To make the responsive image. Just apply the style as follows:
<img src="img/xyz.jpg" class="xyz-img" width="100" height="100" />
<style> .xyz-img{width:100%; height:auto;} </style>

Drawing line to HTML5 canvas not working using javascript

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>

IE9 SVG blurry when resizing

I have an incredibly odd case of IE9 displaying blurry graphics when the <svg> is floated next to another element.
Here's the simplest case I could come up with that is similar to our application:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/2000/svg">
<head>
<meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
<title>IE9 SVG Resize Issue</title>
<script type="text/javascript">
window.onload = function() {
var i = 0;
var increaseWidth = function() {
var w = 500 + i++;
window.resizeTo(w, 500);
document.getElementById('currentWidth').innerHTML = w + 'px';
};
document.getElementById('btn').addEventListener('click', increaseWidth);
increaseWidth();
};
</script>
</head>
<body>
<div style="float: left; width: 20%">
Left
</div>
<div style="float: left; width: 80%">
<svg width="200" height="200" version="1.1">
<rect fill="#fff" stroke="#000" x="0.5" y="0.5" width="100" height="100" />
</svg>
</div>
<span style="color: #999; display: block">NOTE: In IE9 you can only have one tab open to resize the window</span>
<button type="button" id="btn">Increase Width</button>
<span id="currentWidth" style="color: #666; font-size: 15pt"></span>
</body>
</html>
Here's a gallery that shows resizing the window from 500px to 507px. You can see that the lines of the rectangle go from blurry to crisp when resizing by one pixel. The bug seems to occur when having the two columns with a percentage width. It can also happen when the div containing the svg overflows onto a new line (things become slightly blurry). FWIW, in the actual application we're using Raphael.js.
Is there a known issue associated with this and is there an easy fix to keep the lines crisp (with the usual offset by 0.5px fix)?

Categories

Resources