I want to show an image on an HTML5 canvas without putting it on screen first. I've tried <noscript> but that doesn't work as then I can't include the image into my code.
Here's my HTML:
<html>
<noscript>
<img id = "tiles" src="img/tiles.png">
</noscript>
<title>Super Mario World</title>
<head>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script src="sketch.js"></script>
</body>
</html>
Here's my javascript:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var _img = document.getElementById('id1');
var newImg = new Image().src = _img;
context.drawImage(newImg,0,0);
<img id = "tiles" src="img/tiles.png" style="display:none;">
then to display it
document.getElementById("tiles").style.display = "block";
EDIT:
That was a quick answer to the question but, a far better approach would be to create a class
.hidden {
display : none;
}
then add it to elements.
<img id = "tiles" src="img/tiles.png" class="hidden">
and remove it to display
var element = document.getElementById("tiles");
element.classList.remove("hidden");
The reasoning behind this is that if the original display wasn't block, this would create issues, also it is generally discouraged to use inline style.
Related
(* I know this question has been asked before on stack, but no other answers have fixed my problem *)
I am having a problem in my HTML/CSS/JS page where an image is not showing up. It's not throwing an error, and everything else still shows up when I run the code. Any help would be great.
HTML/JS code -
<HTML>
<canvas id = "canvas" width = 480 height = 480>
<head>
<link rel = 'stylesheet' type = "text/css" href = "main.css">
<script id = "jqimport" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title> New Web Page </title>
</head>
<body onload = "startGame()">
<img id = "snake" src = "block.png" height = '100' width = '100'>
<script>
function startGame() {
$(document).ready(function() {
});
}
</script>
</body>
</HTML>
CSS Code -
#canvas {
border: 1px solid black;
background-color: #888888;
position: relative;
}
#snake {
position: relative;
left: 400px;
}
Not sure exactly where you want the image to show up. However, try the following:
You should put the canvas tag within the body of the html and close it. Play around with the CSS properties of your #snake image. You can set the position absolute if you want it to show up over the canvas or change the left property.
<HTML>
<head>
<link rel = 'stylesheet' type = "text/css" href = "main.css">
<script id = "jqimport" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title> New Web Page </title>
</head>
<body onload = "startGame()">
<canvas id = "canvas" width = 480 height = 480></canvas>
<img id = "snake" src = "block.png" height = '100' width = '100'>
<script>...
You should be able to see your image then. Again, I am not fully clear as to where you want the image placed.
My English is weak so I give an example.
I want something like that
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="mydiv" testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = getArgument(element,"testarg");
</script>
</body>
</html>
You could use getAttribute to get an attribute's value, and setAttribute to set it (change it):
<!DOCTYPE html>
<html>
<head>
<title>MySite</title>
</head>
<body>
<div id="mydiv" testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = element.getAttribute('testarg');
console.log(argstring);
element.setAttribute('testarg', 'changed');
console.log(element.getAttribute('testarg'));
</script>
</body>
</html>
Your script should be,
var element = document.getElementById("mydiv");
var argstring = element.getAttribute("testarg");
Alternatively, you can use data attributes which is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM
So, your code will be like,
<div id="mydiv" data-testarg="teststring"></div>
<script>
var element = document.getElementById("mydiv");
var argstring = article.dataset.testarg;
</script>
var element = document.getElementById("mydiv");
var argstring = element.getAttribute('testarg');
console.log(argstring );
<div id="mydiv" testarg="teststring"></div>
I'm wanting to create a "Latest Video" block on my website, but I only need the YouTube thumbnail image and MAYBE the title of the video. I found a method for doing an embed for the latest video itself, but I'm uncertain if I can modify it for just the thumbnail.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Recent Upload Thing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
Can this be repurposed for my idea? And how can I do it if it can't? I have basic HTML and CSS knowledge, with a very limited understanding of javascript and php. If I can just get something that will swap the thumbnail and ideally display the title, I can handle styling and implementation. Also interested in the same for specific playlists' most recent addition, but that doesn't have to happen.
Not sure if this is what you mean but you can try something like:
<div onclick="this.style.display='none'; this.nextSibling.style.display='block';"><img src="image.png" style="cursor:pointer" /></div><div style="display:none">
<!-- Embed code here -->
</div>
I have got my video & its playing fine, but now i need to add a logo on my video tag at right bottom corner(the coordinates(2,2,60,60) icon size is 60*60),
I thought of using canvas, but came up some thing like this..
<html>
<head>
<title>testpage</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var element = document.getElementById('myCanvas');
if (!element || !element.getContext) {
return;
}
var context = element.getContext('2d');
if (!context || !context.drawImage) {
return;
}
var google_img = new Image();
google_img.addEventListener('load', function () {
context.drawImage(this, 2, 2, 60, 60);
},false);
google_img.src = "logo.png";
},false);
</script>
</head>
<body>
<div align="center" style="padding-top:25px;">
<video src="Simplevideo.mp4" width="610" height="380" type="video/mp4" controls="controls"><p>Your browser does not support the video.</p></video>
<canvas id="myCanvas" width="62" height="62">Your browser does not support HTML5 Canvas element.</canvas>
</div>
</body>
</html>
any help to get it..
thanks in advance
shameer ali shaik
You could simply use a div as loxxy said in a comment, but if you really want to use canvas for some reason here is a jsfiddle with your code (fixed) :
http://jsfiddle.net/aS9VG/
The trick is to set the element to an absolute position so it can overlap another element :
style="position:absolute;right:150px;bottom:300px"
I am working through the HTML5 canvas tutorial on the following website:
Mozilla Developers.
In this tutorial, they say that you can use a canvas element as the backdrop of another canvas element. I have tried to do exactly that with the following html page. Unfortunately, the debugger in chrome says failed to load resource. Am I referencing the source canvas object the correct way in the function draw2()?:
<html>
<head>
<title>CANVAS TESTING</title>
<script type="text/javascript">
function draw()
{
var ctx = document.getElementById('tutorial').getContext('2d');
ctx.translate(0,document.getElementById('tutorial').height);
ctx.scale(1,-1)
// Create gradients
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(1, '#00ABEB');
var lingrad2 = ctx.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.25, 'rgba(0,0,0,0)');
lingrad2.addColorStop(0.75, '#000');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// draw shapes
ctx.fillRect(10,10,130,130);
ctx.strokeRect(50,50,50,50);
}
function draw2()
{
ctx=document.getElementById('canvas').getContext('2d');
img = new Image();
img.onload = function()
{
ctx.drawImage(img,0,0);
}
img.src = document.getElementById('tutorial');
}
</script>
</head>
<body onload="draw()">
<p>This is a test of canvas element.</p>
<canvas id="tutorial" width="400" height="400" style="background-color: black"></canvas>
<br /><br />
<canvas id="canvas" width="400" height="400" style="background-color: black"></canvas>
<p>
<input type="button" onclick="draw2()" value="Draw!" />
</p>
</body>
Your solution is kinda correct but you're making it waaaay more complicated than it has to be.
All you have to do is this, nothing any fancier:
var tut = document.getElementById('tutorial');
ctx.drawImage(tut,0,0); // just put in the canvas you want to draw!
Here's a live jsfiddle example if you need more detail
Ok, I just found the answer to my question.
going off the function in Draw2(), I needed to set my img.src to the following:
img.src = document.getElementById('tutorial').toDataURL();
What this does is returns the base64 encoded data string of the png image of the canvas element.