Here is my jsfiddle:
Im looking for 2 things:
i always want the transparent image: "https://s23.postimg.org/c3u19aeqz/bmap_Front.gif" to be on top of the drawing/canvas. Lets call it layer foreground (lfg). This image should never be overpainted.
When i save my drawing as image. I only want to save the "drawings" that were drawn underneath the image. This means saving everything except the transparent image.
I tried "playing" with:
ctx.globalCompositeOperation = "source-over";
ctx.globalCompositeOperation = "destination-over";
and
<div id="LayerTown" class="containerChild" style="position: relative;">
<canvas id="canvas" style="position: absolute; left: 0; top: 0; z-index: 0;">
Update your browser
</canvas>
<img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; left: 0; top: 0; z-index: 1;">
</div>
So far nothing has helped me. Since im very new to html/css/js please consider alterating my fiddle if you want to help me, because i have a hard time understanding what i should do, if its just a command line.
Doing what you said in the OP, adding a image element on top of the canvas is the way to go. By adding the CSS rule "pointer-events:none" you will be able to right click the canvas through the image and saving only what's on the canvas.
<div id="LayerTown" class="containerChild" style="position: relative;">
<canvas id="canvas" style="position: absolute;">
Update your browser
</canvas>
<img src='https://s23.postimg.org/c3u19aeqz/bmap_Front.gif' style="position: absolute; pointer-events: none;">
</div>
You will also have to remove the addImg2Canvas() function from the script as we no longer want to draw the image on the canvas.
Related
Background: My company has a website built using "MojoPortal", which I believe is ASP. We used one of their apps to make a web banner/slider with six images. I'm told that in order for the built in app to work, images need to be in separate containers.
Issue: When the page loads we get a funky looking black bar where the image should be, the image size is drastically reduced and placed at the left side. This doesn't happen every time, seems to be better if images are cached on the machine, and goes away with a page refresh. So far this has occurred mostly on Chrome, but also on Firefox. Have not been able to recreate in edge.
I'm not much of a web developer. Wondering if this is rooted in the CSS or the built in "MojoPortal" application to slide the images. Seen this before?
Screenshot
Editor:
<div><img alt="" src="img1" /></div>
<div><img alt="" src="img2" /></div>
<div><img alt="" src="img3" /></div>, etc
When viewing/inspecting page source:
element.style {
background-color: rgb(0, 0, 0);
position: absolute;
top: 0px;
left: 0px;
display: none;
z-index: 6;
opacity: 0;
width: 720px;
height: 20px;
}
What I need is this:
Overlay image which can change its X and Y position over youtube video without page reload.
Ideally this should be Javascript I guess which upon Interval gets the X and Y values from text file (or MySQL).
In other words...say a car is driving in the Youtube video, the overlay should be red rectangle that every 1 second or so the Javascript gets the X and Y from text file and redraws over the youtube screen red rectagle.
The final result should be something like this:
https://i.ytimg.com/vi/aEBigBm7KBk/hqdefault.jpg
I am C++/C# kind of guy with very little knowledge of Javascript so I want to port a machine learning demo to a friendly interface (webpage), I know this can be too much coding so if someone can at least point me to a free script will be super helpful! thanks!
I've prepared a sample JSFiddle that can get you started in the right direction: https://jsfiddle.net/2nfswab3/
Basically, the <div class="overlay"... are the red squares that overlay the video. You may add as many as you like of them inside the #app container. You mentioned that their position will be changing dynamically every second with values coming from your backend code. Changing their position is as easy as updating their left, right, top, bottom CSS attributes.
You can do that through vanilla JS in this way:
var redSquares = document.getElementsByClassName('overlay');
var squareOne = redSquares[0];
squareOne.style.left = '300px';
HTML:
<div id="app">
<iframe width="100%" height="400px" src="https://www.youtube.com/embed/KGN_9xZBgYY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="overlay" style="left: 370px; top: 140px;"></div>
<div class="overlay" style="left: 170px; top: 140px;"></div>
</div>
CSS:
html,body{
position: relative;
width: 100%;
height: 100%;
}
#app{
position: relative;
}
.overlay{
border: 2px solid red;
color: #fff;
z-index:2;
position: fixed;
width: 100px;
height: 100px;
}
I hope this helps. If you have further need of help or elaboration please ask as a comment.
I have a webpage with a canvas for implementing graphics rendering, and would like to align some text and buttons to the left of it. My HTML code is as follows:
<body onload="webGLStart();">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</body>
So what I want to align to the left is everything in the 'controls' class. Currently it is being displayed below the canvas on a new line. I want it to be aligned to the left starting on the same line as the canvas, with the canvas remaining centered.
I am using a stylesheet and would like to know how to implement this using css.
My site can be seen here. It is the Controls section I want to move up towards the top of the page.
Any help would be much appreciated, thank you.
I would suggest you wrap it all in a wrapper div which is centered and has position relative. Then you can position the controls absolute like this:
<div class="wrapper" style="margin: 0 auto; width: 800px; position: relative;">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls" style="position: absolute; top:0; left:0;">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</div>
Here is a makeshift answer. I would use bootstrap for positioning though.
You can use bootstrap.
JSFiddle
is that what you are looking for? use col-sm-{x/12} to size and resize your positions.
I have a canvas that I add a background image to from my source in the Html, I then insert images from my local computer and add text to the image, I am able to move/rotate image and text no problem.
I wish to have the ability to move the uploaded image and text to back and to front of the background image, I cannot find a solution, I think it involves Multiple Canvas layers or something of the sort. Please can someone suggest a way to do this?
<div class="well" style="height:350px;">
<a name="1"><center>Sonstiges</center></a>
<div class="cleaner_h3"></div>
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son01r.png">
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son02r.png">
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son09.png">
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son04p.png">
<img style="cursor:pointer;width:90px;height:120px;" class="img-polaroid" src="img/phones/designs/son05p.png">
</div>
Jquery portion where I add the background image
$(".img-polaroid").click(function(e){
var el = e.target;
var design = $(this).attr("src"); //src is the particular image you click on
$('#tcanvas').css({
'backgroundImage': 'url(' + design +')',
'backgroundRepeat': 'no-repeat',
'backgroundPosition': 'top center',
'background-size': '100% 100%'
});
});
Canvas element
<div id="phoneDiv" class="page" style="width: 800px; height: 800px; position: relative;left:5%; background-color: rgb(255, 255, 255);">
<canvas id="tcanvas" width=800 height="800" class="hover" style="-webkit-user-select: none;"></canvas>
</div>
Problem:
You have an existing image on the canvas and you want to draw another image behind the existing image.
You can use context.globalCompositeOperation="destination-over" to cause subsequent drawing to be drawn "under" the existing content.
What happens is that any existing non-transparent pixels on the canvas will remain and the new image is drawn only into the transparent pixels.
So draw this wall-frame with transparent pixels inside the frame:
context.drawImage(backgroundImage,0,0);
Then set compositing to "destination-over"
(any new drawing will display only where the existing wall-frame is transparent).
context.globalCompositeOperation="destination-over";
Then draw a second image:
The city will be "drawn behind" the existing image (thanks to compositing):
context.drawImage(cityImage,0,0);
I am looking for a JavaScript(or anything really) framework that can add text with a semi opaque background to images. I am also wanting something with simple mouse over support. I've seen some that use solely css but wont work in my case due their use of multiple images (My images are hi res and I don't want to waste bandwidth). Another I found worked but created invalid code and added too much to load times. Is there a framework out their or am I just going to have to code my own?
Thanks
<div style="position: relative; height: 200px; width: 200px;">
<img src="something.jpg" width="200" height="200" alt="Your Image" />
<div style="position: absolute; height: 200px; width: 200px; left: 0; top: 0; line-height: 200px; vertical-align: middle; opacity: 0.5;">Your semi-opaque text</div>
</div>
going off the top of my head, but wouldn't something like that do the trick?