Say I have a index.html with a canvas in it:
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
and the canvas is showing ok this way ~~~
Now I want to put a image as background behind the canvas and I tried to add a img tag in the body:
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<img src="xxx.png" alt="" />
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
but then the canvas appeared to show after the image not on top of it ...
I really know nothing about html I think it should not be that hard to get this done, hope someone can give a hand here, thanks :)
Live Demo
You just need to use z-index. I put the image and the canvas element in a container, and position them so the canvas will always be over the image.
Also another note, you shouldn't size your canvas using CSS, you should always do it via the properties directly. In my fiddle I did it via JS.
Markup
<div id="container">
<img class='img' src="http://lorempixel.com/320/480/" alt="" />
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
CSS
body{text-align: center;background: #f2f6f8;}
.img{position:absolute;z-index:1;}
#container{
display:inline-block;
width:320px;
height:480px;
margin: 0 auto;
background: black;
position:relative;
border:5px solid black;
border-radius: 10px;
box-shadow: 0 5px 50px #333}
#gameCanvas{
position:relative;
z-index:20;
}
you can draw image in canvas like this , rather than putting canvas on image
var topMap = new Image();
topMap.src = "myiamge.jpeg";
function drawMap() {
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(topMap, 0, 0);
}
function init() {
drawMap();
}
topMap.onload = function() {
init();
}
You can set a background image for the canvas with background-image: url('xxx.png'); but the background won't be displayed if the user presses View image in the browser.
<canvas style="background-image: url('xxx.png');"id="gameCanvas" width="320" height="480"></canvas>
Or use JavaScript like Pranay Rana said (it's better if you have other levels or if you have to change the background later) :)
Related
I have reviewed many canvas z-index posts here, including:
HTML5 Canvas layer issue
Multi Layer Canvas HTML5
html5 - canvas element - Multiple layers
but I am not finding the answer to my issue.
I am trying to simply place one canvas directly behind another canvas. When a user clicks on the canvas, it will change the stacking order. But instead of the canvases being behind and in front of each other, they can both be seen, one on top, and one beneath it (not behind it) (see https://imgur.com/a/BcUNy).
HTML and CSS:
<div id="preview" style="visibility:hidden;">
<canvas id="cOriginal" width="2" height="1" onclick="clickCompare()" style="position:relative; z-index:2; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
<canvas id="cPreview" width="2" height="1" onclick="clickCompare()" style="position:relative; z-index:1; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
<canvas id="cSave" width="2" height="1" style="position:relative; z-index:0; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
</div>
Thank you very much!
EDIT: Updating my question to show the current problem.
HTML:
<div id="preview" style="visibility:hidden; position:relative;">
<canvas id="cOriginal" width="2" height="1" onclick="clickCompare()" style="position:absolute; z-index:2; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
<canvas id="cPreview" width="2" height="1" onclick="clickCompare()" style="position:absolute; z-index:1; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
<canvas id="cSave" width="2" height="1" style="position:absolute; z-index:0; border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060;"></canvas>
</div>
CSS (centering code):
<style>
#cOriginal, #cPreview, #cSave { max-width: 100%; display: block; margin: auto; left: 0; right: 0; margin-left: auto; margin-right: auto; }
</style>
The canvases are now layered and centered. But everything following the canvases has broken. See https://imgur.com/AHG59zd. Thank you!
First time answering on SO, but I believe I have the answer to your question.
I redid the HTML and JavaScript to be as simplistic as possible, since your question seems to be at the root of it all, asking for help on changing canvas layering, so I did it as simply as I could think of, here is the code, followed by a link to the codepen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Canvas Layering</title>
</head>
<body>
<div style="position: relative;">
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0; background-image: url(https://static.pexels.com/photos/158780/leaf-nature-green-spring-158780.jpeg);" onclick="ChangePicture(1)"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1; background-image: url(https://static.pexels.com/photos/54320/rose-roses-flowers-red-54320.jpeg);" onclick="ChangePicture(2)"></canvas>
<canvas id="layer3" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 2; background-image: url(https://static.pexels.com/photos/5412/water-blue-ocean.jpg);" onclick="ChangePicture(3)"></canvas>
</div>
</body>
<script>
function ChangePicture(layerNumber) {
if (layerNumber === 1) {
document.getElementById("layer1").style.zIndex = "0";
document.getElementById("layer2").style.zIndex = "2";
document.getElementById("layer3").style.zIndex = "1";
} else if (layerNumber === 2) {
document.getElementById("layer1").style.zIndex = "1";
document.getElementById("layer2").style.zIndex = "0";
document.getElementById("layer3").style.zIndex = "2";
} else if (layerNumber === 3) {
document.getElementById("layer1").style.zIndex = "2";
document.getElementById("layer2").style.zIndex = "1";
document.getElementById("layer3").style.zIndex = "0";
} else {
console.log("Failed.");
}
}
</script>
</html>
https://codepen.io/levi_blodgett/pen/KQyWoR
If you want to change what picture starts as the default, simply change the z-index for the styling inside the html.
I'm trying to add a delay to some text I have displayed. An image appears and then I want the text to appear after X time.
Here is my current code which displays both the image and text at the same time. I'm not familiar much with how to make this work, so any help would be great. I'm just doing this to help make my stream look better!
Thanks guys
#notification {
font-family: 'Roboto';
font-size: 24px;
}
.image-container {
width: 100%;
height: 100%;
}
#notification .image {
object-fit: contain;
width: 100%;
height: 100%;
}
.subtitle {
font-size: 24px;
color: #FFFFFF;
}
.video {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.title {
color: #FFFFFF;
}
.text-container {
position: absolute;
top: 50%;
left: 60%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
text-shadow: 0px 0px 1px #000000, 0px 0px 2px #000000, 0px 0px 3px #000000, 0px 0px 4px #000000, 0px 0px 5px #000000;
}
.tts {
display: none;
}
.keyword:not(.user_message) {
color: #FF9F9F;
}
<div class="notification-container">
<div class="image-container">
<!--
Adding an <img> tag to this section with class="image" will give it the
default styling of this alert layout. You may either hardcode the image
URL, or use the variable "{image}" to have the URL of any image you
have uploaded on the Media tab automatically inserted.
For example:
<img class="image" src="https://mbt-user-upload.s3.amazonaws.com/uncodinatx/muxy-character.svg" />
Or
<img class="image" src="{image}" />
If you have uploaded a webm video instead, use the "{video}" variable inside a <video> tag to have its URL automatically inserted.
For example:
<video class="video" autoplay loop muted="true">
<source src="{video}" type="video/webm">
</video>
-->
<img class="image" src="{image}" />
</div>
<div class="text-container">
<div class="title">
<span class='keyword name'>{name}</span> has just subscribed!
</div>
<div class="subtitle">
<span class='keyword user_message'>{user_message}</span>
</div>
</div>
<div class="tts">
<!--
Any text placed inside this div will be spoken using your selected
Text-To-Speech voice when the alert is shown. Note that by default
Text-To-Speech is disabled, so you will have to enable it on the Media
tab.
-->
{tts_user_message}
</div>
<!--
Adding any audio tag to your markup will play it automatically when
the alert is shown. Note that you should not add the 'autoplay' attribute
so that we can control exactly when the audio file plays. If you have
specified an audio alert in the Media tab (either one provided by us, or
a custom sound you have uploaded) you can have the source URL of that file
inserted automatically by using the '{audio}' variable.
For example:
<audio src='https://u.muxy.dev/assets/sounds/alert-sounds/Bloom.mp3'></audio>
Or
<audio src='{audio}'></audio>
-->
</div>
copy and run this.
in css you use the "display:none" property then in Jquery , you are going to display it when the page has finished loading.
The text will appear 2 secs (2000ms) after the image. You can play with the timing to suit your need
<style type="text/css">
/*edited*/
#text{
display: none;
color: red;
}
/*edited end*/
#image{
width: 300px;
display: none;
}
</style>
<!-- image -->
<div >
<img id ="image" src="https://tinyjpg.com/images/social/website.jpg" />
</div>
<!-- text -->
<p id="text">Hello user</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if($("#image").is(":hidden")){
$("#image").show(100,function(){
$("#text").delay(2000).show(100);
});
}
});
</script>
At the moment I have 3 images and when hovered they have a border around them, what I want is when the user clicks the image the hovered style remains on that image, I tried using :active but to no avail.
Here is the CSS code:
.portfolio-image{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}
.portfolio-image:hover{
border:1px solid #123;
box-shadow:none;
}
and the fiddle: http://jsfiddle.net/N22Jc/
:active only stays in effect when the user has the mouse pressed down on the element.
You will need to use JavaScript to accomplish this.
Try this, CSS:
fieldset{
border:0px; padding:0px;
}
img.style1{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}
img.style2{
border:1px solid #123;
box-shadow:none;
}
JavaScript (head):
`function changeStyle(id, newClass){
document.getElementById(id).className = newClass;
}
function changeOther1(newClass){
document.getElementById("i1").className = newClass;
}
}
HTML:
`<fieldset class="radios"><label for="one" class="label_radio">
<img src="yourimage.jpg" id="i1" class="style1" onclick="changeStyle(this.id, 'style2');">
<input name="number" id="one" value="" type="radio" /></label></fieldset>
I didn't test the code, but you get the idea. (I used radios, because I assume you want these to be used in a form?)
If you want to give the focus on an element by clicking on it , that doesn't usually take focus unlike form elements, You need to add the tabindex attribute and set it to 0 in order to have a div or an img to be able to take the focus and use in CSS :focus.
In your fiddle , you draw a border on a div that holds a link that holds an image. the div has no tabindex.
When you click this box , this is the link that catch the click, not the div nor the image , and off you go and :focus is not usable like this.
You could use :target if structure allows you to do so via CSS, DEMO.
instead using nth-child(x) as in demo , you could use single ids on your boxes to select them clearly and not mind in wich number position they stand.
Here's a jQuery solution if you're interested and here's a FIDDLE
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
img {
width: 150px;
height: 150px;
margin: 20px;
cursor: pointer;
border: 1px solid gray;
}
.active {
border: 1px solid red;
}
<script>
(function($) {
$('.item').click(function() {
$(this).addClass('active').siblings('.item').removeClass('active');
});
/* Requires jQuery UI
$('.item').click(function() {
$(this).switchClass('item','active',300).siblings('.active').switchClass('active','item',300);
});
*/
})(jQuery);
</script>
*Note: Put script just before the </body> tag.
Of course to be able to use jQuery you must include jQuery library in the <head> section of your HTML document like below
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- And if you want to use script above which requires jQuery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
*Note: You can also download jQuery & jQuery UI libraries and instead CDN versions you'll be able to load local versions. Download jQuery - Download jQuery UI
If you decide to use local versions. download them, put them in the root folder of your site and include them like below
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui-1.10.4.min.js"></script>
</head>
Also you can put the libraries in folder e.g. js or scripts and then just change path to your local libraries versions
<head>
<script src="scripts/jquery-1.11.0.min.js"></script>
<script src="scripts/jquery-ui-1.10.4.min.js"></script>
</head>
That's it, if you decide to use jQuery and if you have additional questions, ask ;)
Bottom border moves down and down again in IE9 when hovering/unhovering the button:
<!DOCTYPE html>
<html>
<head>
<style>
.btn:hover {
box-shadow: 0 0 0 2px #b1b3b4;
}
</style>
<head>
<body>
<div style="overflow: auto; border: 1px solid black;">
<div style="width: 110%; height: 20px;">
Wide content causing horizontal scrolling....
</div>
<button class="btn">Hover Me</button>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/WW3bh/6353/
Is it a known IE9 issue? How do I work that around?
Put display:block at the .btn:hover.
Guess that will fix it!
.btn:hover {
box-shadow: 0 0 0 2px #b1b3b4;
display:block;
}
Option 1:
Setting a height for the scrollable div seems to solve the problem:
Working Example 1
<div style="overflow: auto; border: 1px solid black; height:65px;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
<button class="btn">Hover Me</button>
</div>
Option 2:
Use overflow-x:scroll; rather than overflow:auto;:
Working Example 2
<div style="overflow-x: scroll; border: 1px solid black;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling....</div>
<button class="btn">Hover Me</button>
</div>
Option 3:
Probably the best option as it allows the box-shadow to be visible in IE9.
Wrap the button in a div with class .btn rather than placing the class directly on the button.
Working Example 3
.btn {
display:inline;
}
.btn:hover {
display:inline-block;
border-radius:2px;
box-shadow: 0 0 0 2px #b1b3b4;
}
<div style="overflow: auto; border: 1px solid black;padding:2px;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
<div class="btn">
<button>Hover Me</button>
</div>
<div class="btn">
<button>Hover Me</button>
</div>
<div class="btn">
<button>Hover Me</button>
</div>
</div>
Option 4:
Just for laughs...
Working Example 4
<!--[if IE]>
<div id="noIE">Please download a Real Browser!
<br><sub>Internet Explorer is hateful non-compliant browser that kicks puppies... </sub>
</div>
<![endif]-->
Try this:
Option 1 (change html slightly):
<div style="overflow: auto; border: 1px solid black;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
<span><button class="btn">Hover Me</button></span>
</div>
http://jsfiddle.net/WW3bh/10615/
Option 2 (with provided html, using js):
$('.btn').hover(function () {
var $btn = $(this);
var originalPosition = $btn.css('position');
$btn.css('position', 'fixed');
// this.offsetHeight is needed to trigger browser reflow.
this.offsetHeight;
$btn.css('position', originalPosition);
});
http://jsfiddle.net/WW3bh/10617/
To correct this, change: overlow: auto to overflow: visible and that should so it.
You got yourself a really weird bug there sir. And it definitely a bug, if you use ie9-mode on a ie10, this will not happen.
I couldn't figure it out why but it seems to go back to its original state if you resize the window manually. Maybe you can fake this with javascript?
Another thing i discovered was that if you set a :hover {zoom: 1} on the element with the scroll, it "reset" itself when hovering of it. maybe someone can use this to figure out why it acts like it does.
fiddle for it here: http://jsfiddle.net/WW3bh/10599/
please try this css:
.btn:hover {
box-shadow: 1px 2px 0px 1px #b1b3b4;
}
<div style="overflow: auto; border: 1px solid black;">
<div style="width: 110%; height: 80px;">Wide content causing horizontal scrolling....</div>
<button class="btn">Hover Me</button>
<div> </div>
</div>
http://jsfiddle.net/WW3bh/10472/
Adding a height of 100% to the div should fix your issue
<div style="overflow: auto; border: 1px solid black;height: 100%">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling....</div>
<button class="btn">Hover Me</button>
</div>
Here is the working JSFiddle: http://jsfiddle.net/c2sBp/
I checked this in Ie9 and did not find that border bottom expanding.
please give a try. and Let me know
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
.btn{
box-shadow: 0 0 0 2px #b1b3b4;
}
.noBtn{
box-shadow: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div style="overflow: auto; border: 1px solid black;" >
<div style="width: 110%; height: 20px;">
Wide content causing horizontal scrolling....
</div>
<button id="hover">Hover Me</button>
</div>
<script>
$(document).ready(function(){
try{
$('#hover').hover(function () {
$("#hover").addClass('btn');
$("#hover").removeClass('noBtn');
});
$('#hover').mouseleave(function () {
$("#hover").removeClass('btn');
$("#hover").addClass('noBtn');
});
}catch(e){
alert(e);
}
});
</script>
</body>
</html>
Please let me know after trying.
I have a canvas with height of 480. I am using Easeljs to load images in canvas . Each row contains 3 images. The images loaded beyond the height of canvas(480) are hidden. I need to add vertical scrollbar to view those images. How can i implement this.
thanks,
sathya
Here is how to add a vertical scrollbar to canvas that allows scrolling up/down over a larger image: http://jsfiddle.net/m1erickson/a9KDB/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
body{ background-color: ivory; }
div, canvas {
position:absolute;
}
.wrapper {
top:10px;
left:10px;
width: 300px;
height: 300px;
border: 2px solid black;
margin:30px 0 2;
overflow: hidden;
background-color:green;
}
.vertical-scroll {
left:320px;
top:10px;
border: 1px solid green;
width: 20px;
height: 300px;
}
.vertical-scroll div.bar {
left:0px;
top:0px;
width: 20px;
background-color: blue;
height: 20px;
}
#mycanvas {
left:0px;
top:0px;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var wrapper;
var canvasHeight;
var vScrollHeight;
var canvasWrapperHeight=300;
$(".bar").draggable({
containment: "parent"
});
$(".bar").on("drag", function (event, ui) {
var ctop=(-ui.position.top * canvasHeight / canvasWrapperHeight);
canvas.style.top = ctop + "px"
});
var img=new Image();
img.onload=function(){
canvas.width=this.width;
canvas.height=this.height;
canvasHeight=this.height;
vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight;
document.getElementById("vbar").style.height=vbarHeight+"px";
ctx.drawImage(this,260,0,300,this.height,0,0,300,this.height);
}
img.src="http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg";
}); // end $(function(){});
</script>
</head>
<body>
<div class="wrapper" id="wrap1">
<canvas id="mycanvas" width="300px" height="300px" />
</div>
<div class="vertical-scroll" id="vscroll">
<div class="bar" id="vbar"></div>
</div>
</body>
</html>
wrap the canvas with a div, then set a height for the div, and finally apply overflow-y:auto and overflow-x: hidden property to the div.
overflow-y:auto shows the vertical scrollbar when needed
overflow-x: hidden hides the horizontal scrollbar
http://jsfiddle.net/V92Gn/3509/
<div style="height:200px;width:480px; overflow-y:auto;overflow-x: hidden;">
<canvas id="canvas" style="background:navy" width="480" height="820"></canvas>
</div>
I don't know about any ScrollBar-Solutions for EaselJS and it's not possible to do this via HTML.
So you would have to code your own scrollbar, if you have trouble with that, there should be a quite a few tutorials for that to be found online for ActionScript3 you can easily adapt those for EaselJS.
Another option would be to extend the height of the canvas itself and add a scrollbar to it's parent container, I'm not sure though if that'd be a very good solution.