I have a HTML Canvas in which I want to append couple of html canvas.
<div>
<canvas id="BackGroundImage" width="800" height="300"
style="position: absolute; z-index: 0;"></canvas>
<canvas id="canvas" width="800" height="300"
style="position: absolute; z-index: 1;"></canvas>
</div> '
Like this.
append(''<div>\
<canvas id="BackGroundImage" width="800" height="300"\
style="position: absolute; z-index: 0;"></canvas>\
<canvas id="canvas" width="800" height="300"\
style="position: absolute; z-index: 1;"></canvas\>
</div>'');
But this doesnt work the sapces after canvas give me error saying unterminated statements.
Try this.
issue 1: append(' ' // string is not properly created.
issue 2 : </canvas\>
$("body").append('<div> I am added, inspect me in dev console and found the desired html\
<canvas id="BackGroundImage" width="800" height="300"\
style="position: absolute; z-index: 0;"></canvas>\
<canvas id="canvas" width="800" height="300"\
style="position: absolute; z-index: 1;"></canvas>\
</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Use like this
append('<div>'+
'<canvas id="BackGroundImage" width="800" height="300"'+
'style="position: absolute; z-index: 0;"></canvas>'+
'<canvas id="canvas" width="800" height="300"'+
'style="position: absolute; z-index: 1;"></canvas\>'+
'</div>');
try this
append('<div>'+
'<canvas id="BackGroundImage" width="800" height="300"'+
' style="position: absolute; z-index: 0;"></canvas>'+
'<canvas id="canvas" width="800" height="300"'
+' style="position: absolute; z-index: 1;"></canvas\> </div>');
You are almost right, but the problem is you used / instead of +, some other people make problems by adding ' inside '' or " inside ""
$('.here').append('<div>' +
'<canvas id="BackGroundImage" width="800" height="300"' +
'style="position: absolute; z-index: 0;"></canvas>' +
'<canvas id="canvas" width="800" height="300"' +
'style="position: absolute; z-index: 1;"></canvas\>' +
'</div>'+
'<h1>Added</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="here">
</div>
Related
My purpose is show a original canvas with 400x400 (canvas1), and use a small canvas 50x50 (canvas2) to select a region, then show amplified result to canvas 200x200 (canvas3). I wish canvas2 will move with mouse but canvas3 keep at right side of canvas1.
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
position: relative;
border: 1px solid black;
}
.inner {
border:1px solid red;
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
<div id="glass" class="inner">
<canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
<div class="inner" style="top: 25px; left: 0px; width: 50px;"/>
<div class="inner" style="top: -25px; left: 25px; height: 50px;"/>
</div>
<div id="zoomer" class="container">
<canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
<div class="inner" style="top: 100px; left: 0px; width: 200px;"/>
<div class="inner" style="top: -100px; left: 100px; height: 200px;"/>
</div>
<div class="container">
<input id="browser" type='file' ></input>
</div>
<script>
var glass = document.getElementById('glass');
var canvas2 = document.getElementById('canvas2');
var w = canvas2.width;
var h = canvas2.height;
function onMouseMove(event,thiz) {
var x = event.offsetX;
var y = event.offsetY;
glass.style.left = (x - w/2) + 'px';
glass.style.top = (y - h/2) + 'px';
}
</script>
</body>
</html>
But current result is:
canvas2 and canvas3 will move together if mouse move.
The choose file button overlapped with canvas 3.
I wish only canvas2 (and the crosshair lines) move with mouse but keep canvas1,canvas3 and chosse file button statically side by side.
The div statement is not correct.
Use inline-block display mode.
With below html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
.container {
display: inline-block;
vertical-align: top;
position: relative;
border: 1px solid black;
}
.inner {
border:1px solid red;
pointer-events: none;
position: absolute;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400" style="border:1px solid red;" onmousemove="onMouseMove(event,this);"></canvas>
<div id="glass" class="inner">
<canvas class="inner" id="canvas2" width=50 height=50 ></canvas>
<div class="inner" style="top: 25px; left: 0px; width: 50px;"></div>
<div class="inner" style="top: 0px; left: 25px; height: 50px;"></div>
</div>
<div id="zoomer" class="container">
<canvas id="canvas3" class="inner" width=200 height=200 ></canvas>
<div class="inner" style="top: 100px; left: 0px; width: 200px;"></div>
<div class="inner" style="top: 0px; left: 100px; height: 200px;"></div>
</div>
<input id="browser" type='file' ></input>
<script>
var glass = document.getElementById('glass');
var canvas2 = document.getElementById('canvas2');
var w = canvas2.width;
var h = canvas2.height;
function onMouseMove(event,thiz) {
var x = event.offsetX;
var y = event.offsetY;
glass.style.left = (x - w/2) + 'px';
glass.style.top = (y - h/2) + 'px';
}
</script>
</body>
</html>
The result is below:
I'm having hard time on figuring out how should i do in order to set a proper size to the following canvases
<div id="canvasesdiv" style="height: 100%; width: 100%; display: table-cell; position: relative; width:578px; height:415.5px">
<canvas id="c1" style="z-index: 1; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c2" style="z-index: 2; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c3" style="z-index: 3; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c4" style="z-index: 4; position:absolute; left: 80px; width="680" height="435"></canvas>
<canvas id="c5" style="z-index: 5; position:absolute; left: 80px; width="680" height="435"></canvas>
Cleary width and height are parsed wrongly (html is expecting : and the values in px) but somehow the canvases are drawn in their full dimension. Instead if i use something like:
<canvas id="c1" style="z-index: 1; position:absolute; left: 80px; "></canvas>
<canvas id="c2" style="z-index: 2; position:absolute; left: 80px; "></canvas>
<canvas id="c3" style="z-index: 3; position:absolute; left: 80px; "></canvas>
<canvas id="c4" style="z-index: 4; position:absolute; left: 80px; "></canvas>
<canvas id="c5" style="z-index: 5; position:absolute; left: 80px; "></canvas>
or with
... width: 500px; height: 500px;"
The canvases are all cropped down to 300x150 (chrome default) no matter what.
The problem is that position:absolute is a must in order to have layers. How can i do in order to define a dimension without ruin the canvas quality and make it so it stays in the given boundary?
See this example, can you fix it so that the position is absolute but the size is whatever you want and centered? See here.
If I add position:absolute, the overlay works but it is out of the div bound, see here.
You are inserting HTML width and height attributes in the style attributes, which should hold css. If you check the dev tools, you will see the relevent rules are striked through. Just use css to style them. Even better, place them in the <style/> tag or in an external stylesheet
Not good:
<canvas style="... width="680" height="435"></canvas>
Good:
<canvas style="... width: 680px; height: 435px;"></canvas>
Or: just close the double quote, and use the attributes anyway (although css is the better solution)
I'm experimenting with using drawing function on Canvas and I was curious to see if anyone can suggest a solution as I'm new to this ;)
My main html pages have a couple of Canvases set up, in layers so that I can manipulate and erase each without interfering with the others. I have something like this:
<div>
<canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
<canvas id="layer1" width="450" height="450" style="position: absolute; left:0; top:0; z-index:1;"></canvas>
<canvas id="layer2" width="450" height="450" style="position: absolute; left:0; top:0; z-index:2;"></canvas>
<canvas id="layer3" width="450" height="450" style="position: absolute; left:0; top:0; z-index:3;"></canvas>
<canvas id="layer4" width="450" height="450" style="position: absolute; left:0; top:0; z-index:4;"></canvas>
</div>
In a bit of Javascript, I am manipulating these canvases such as:
c1=document.getElementById("layer1");
ctx1=c1.getContext("2d");
ctx1.beginPath();
ctx1.moveTo(this.xcoord, this.ycoord);
ctx1.lineTo(newx, newy);
ctx1.stroke();
Now this works; it draws the lines on screen with no problem, except that they are not being drawn on the canvas, they are being drawn relative to the main browser window (my canvases are not at the top left of the screen but a little way down due to text and other graphics).
Can anyone suggest what I am doing wrong?
It is realtive to the browser because you told it to be relative to the browser. You need to make the wrapper element's position relative.
CSS:
div.wrapper { position:relative;}
div.wrapper canvas { position : absolute; }
HTML:
<div class="wrapper">
<canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>
<canvas id="layer1" width="450" height="450" style="z-index:1;background-color: red"></canvas>
<canvas id="layer2" width="450" height="450" style="z-index:2;background-color:yellow;"></canvas>
</div>
JSFiddle:
http://jsfiddle.net/X8BCp/1/
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 320px;
height: 400px;
border: 1px solid red;
}
#top {
width: 320px;
height: 80px;
border: 1px solid blue;
}
</style>
<script>
var type;
function one(){
type = One.js
}
function two(){
type = Two.js
}
</script>
</head>
<body>
<div id="top">
<button onclick="one()">One</button>
<button onclick="two()">Two</button>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
<button onclick="pause()">Pause</button>
</div>
<div style="position: relative;" id="container">
<canvas id="myCanvas" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="trail" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="plane" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="buildings" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="cloud" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="buildings2" width="320" height="400"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="canvas2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
<script type="text/javascript" src=type> </script>
</body>
</html>
Is it possible to have a button before a script is activated to define which script is being played. So a drop down box to edit which script is being activated. I do not know how to do this what so ever.
Thank you :)
you can pass a value to your function to select which one you want to use. For example:
function select(which){
switch(which)
{
case 1:
// execute One.js
break;
case 2:
// execute Two.js
break;
default:
//
}
}
I thing this is what you're looking for something like this:
<body onload="load(0);">
<button onclick="load(0);">One</button>
<button onclick="load(1);">Two</button>
<script>
var myScripts = [
"./js/scriptOne.js", "./js/scriptTwo.js"
];
function load(i){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", myScripts[i]);
document.getElementsByTagName("head")[0].appendChild( fileref );
}
</script>
This way you're dynamically load your scripts.
I have 3 layers of canvas - 1 is matrix, 2 & 3 is graphics, how to preserve them in one image?
<div style="position: relative;">
<canvas id="matix" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer1" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="layer2" width="100" height="100"
style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
You can draw one canvas into another with ctx.drawImage(other_canvas,0,0)
If you do that in the right order, you will have all the canvas contents correctly layered in one of them.
If you want to save the image, you can call canvas.toDataURL() to get the contents as a base64 encoded PNG file.