I'm doing a BonusBar for a mini game.
I've created 2 canvas, one with only the border, another one with a green bar.
My objective is, when x = 300, clean the green canvas to redraw the green rectangle.
The problem is that the canvas is not cleared.
here's the code
var CarreBase = document.getElementById("CarreBase");
var CarreBasectx = CarreBase.getContext("2d");
var x = 0;
var CarreRempli = document.getElementById("CarreRempli");
var CarreRemplictx = CarreRempli.getContext("2d");
BarreBonus();
function BarreBonus() {
x = x + 30;
console.log(x)
if (x > 300) {
CarreRemplictx.clearRect(0, 0, x, 100);
/*CarreRemplictx.rect(0,0,x,200);
CarreRemplictx.fillStyle="009FE3";
CarreRemplictx.fill();*/
x = 0;
changement = true;
}
CarreRemplictx.rect(0, 0, x, 200);
CarreRemplictx.fillStyle = "00C327";
CarreRemplictx.fill();
setTimeout("BarreBonus ()", 1000);
}
#CarreBase {
width: 350px;
height: 25px;
left: 150px;
top: 0px;
border: 2px solid #000000;
position: absolute;
z-index: 1;
}
#CarreRempli {
position: absolute;
left: 150px;
top: 0px;
width: 355px;
height: 27px;
z-index: 0;
}
<!DOCTYPE html>
<meta charset="Unicode">
<html>
<head>
<link rel="stylesheet" type="text/css" href="syra.css" />
<title>syracuse</title>
</head>
<body>
<canvas id="CarreBase"></canvas>Bonus Bar :
<canvas id="CarreRempli"></canvas>
<script src="js/syra.js"></script>
</body>
</html>
trouble with feel() because filling all old path.
for resolving this issue need use 'CarreRemplictx.beginPath();'
Resets the current default path.
Additional info:
4.12.5.1.12 Drawing paths to the canvas
11 Drawing paths to the canvas
rewrite this code, but for example...
var CarreBase = document.getElementById("CarreBase");
var CarreBasectx = CarreBase.getContext("2d");
var x = 0;
var CarreRempli = document.getElementById("CarreRempli");
var CarreRemplictx = CarreRempli.getContext("2d");
BarreBonus();
function BarreBonus() {
x = x + 30;
console.log(x)
if (x > 300) {
CarreRemplictx.clearRect(0, 0, x, 200);
CarreRemplictx.beginPath();
/*CarreRemplictx.rect(0,0,x,200);
CarreRemplictx.fillStyle="009FE3";
CarreRemplictx.fill();*/
x = 0;
changement = true;
} else {
CarreRemplictx.fillStyle = "#00C327";
CarreRemplictx.rect(0, 0, x, 200);
CarreRemplictx.fill();
/* or single CarreRemplictx.fillRect(0, 0, x, 200);*/
}
setTimeout(BarreBonus, 1000);
}
#CarreBase {
width: 350px;
height: 25px;
left: 150px;
top: 0px;
border: 2px solid #000000;
position: absolute;
z-index: 1;
}
#CarreRempli {
position: absolute;
left: 150px;
top: 0px;
width: 355px;
height: 27px;
z-index: 0;
}
<!DOCTYPE html>
<meta charset="Unicode">
<html>
<head>
<link rel="stylesheet" type="text/css" href="syra.css" />
<title>syracuse</title>
</head>
<body>
<canvas id="CarreBase"></canvas>Bonus Bar :
<canvas id="CarreRempli"></canvas>
<script src="js/syra.js"></script>
</body>
</html>
var CarreBase = document.getElementById("CarreBase");
var CarreBasectx = CarreBase.getContext("2d");
var x = 0;
var CarreRempli = document.getElementById("CarreRempli");
var CarreRemplictx = CarreRempli.getContext("2d");
BarreBonus();
var itr=0;
function BarreBonus() {
x = x + 30;
console.log(x)
if (x > 300) {
itr++;
CarreRemplictx.clearRect(0, 0, x, 200);
CarreRemplictx.beginPath();
//CarreRemplictx.rect(0,0,x,200);
CarreRemplictx.fillStyle="GREEN";
//CarreBasectx.fillStyle="GREEN";
CarreRemplictx.fill();
//CarreBasectx.fill();
if(itr>1)
return ;
else
x = 0;
changement = true;
}
else{
CarreRemplictx.rect(0, 0, x, 200);
CarreRemplictx.fillStyle = "00C327";
CarreRemplictx.fill();
}
setTimeout("BarreBonus ()", 1000);
}
#CarreBase {
width: 350px;
height: 25px;
left: 150px;
top: 0px;
border: 2px solid #000000;
position: absolute;
z-index: 1;
}
#CarreRempli {
position: absolute;
left: 150px;
top: 0px;
width: 355px;
height: 27px;
z-index: 0;
}
<!DOCTYPE html>
<meta charset="Unicode">
<html>
<head>
<link rel="stylesheet" type="text/css" href="syra.css" />
<title>syracuse</title>
</head>
<body>
<canvas id="CarreBase"></canvas>Bonus Bar :
<canvas id="CarreRempli"></canvas>
<script src="js/syra.js"></script>
</body>
</html>
you had use 100 instead of 200 in clearrect() which cleared only half of the rectangle.
The beginPath() method begins a path, or resets the current path.but you didn't.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
perspective: 500px;
perspective-origin: top;
transform-style: preserve-3d;
width: 100%;
height: 100vh;
background: black;
position: relative;
}
.cursor {
position: absolute;
width: 8rem;
height: 3px;
border-radius: 10px;
background: white;
z-index: 11;
left: -50px;
top: 30px;
transform-style: preserve-3d;
transform: translateZ(100px) rotateX(-0deg);
}
.follow_cursor {
position: absolute;
background: white;
width: 2px;
height: 5rem;
z-index: 2;
top: 100%;
left: 0%;
right: 0;
transform-origin: top;
backdrop-filter: blur(20px);
}
.follow_cursor2 {
position: absolute;
background: white;
width: 2px;
height: 2rem;
z-index: 3;
top: 100%;
left: 100%;
right: 0px;
transform-origin: top;
backdrop-filter: blur(20px);
}
</style>
</head>
<body>
<!-- this div need to be fixed -->
<div class="follow_cursor"></div>
<div class="follow_cursor2"></div>
<div class="cursor"></div>
</body>
<script>
let cursor = document.querySelector(".cursor");
let main = document.querySelector(".main");
const follow = document.querySelector(".follow_cursor");
const follow_2 = document.querySelector(".follow_cursor2");
const origR = follow.getBoundingClientRect();
const origR_2 = follow_2.getBoundingClientRect();
document.onmousemove = (e) => {
let x = e.pageX;
let y = e.pageY;
cursor.style.transform = `translate3d(${x}px, ${y}px , 0)`;
// calculate distance and angle.
let xf = origR.left + origR.width / 2;
let x2f = origR_2.left + origR_2.width / 2;
let yf = origR.top;
let y2f = origR_2.top;
// // distance to cursor from follow
let dist = Math.sqrt((xf - x) * (xf - x) + (yf - y) * (yf - y));
let dist2 = Math.sqrt((x2f - x) * (x2f - x) + (y2f - y) * (y2f - y));
// console.log(dist)
var angle = 0;
var angle2 = 0;
// get the rotation angle
angle = 90 + (Math.atan2(yf - y, xf - x) * 180) / Math.PI;
angle2 = 90 + (Math.atan2(y2f - y, x2f - x) * 180) / Math.PI;
follow.style.transform =
"rotateZ(" + angle + "deg) scaleY(" + dist / origR.height + ")";
follow_2.style.transform =
"rotateZ(" + angle2 + "deg) scaleY(" + dist2 / origR_2.height + ")";
};
</script>
</html>
i am trying to join the vertical lines with my custom cursor but its not working.
i need to join these cursor ending with these vertical line endings.
the link of this image given below
you can run the snippets and check the image to take the refrence what i am trying to do.
i will be thankful if you will help me.
my communication skill are not good hope you will understand
i want this lines to look like this in the image
Your code was hard to read, but I think the transform: translateZ() in the initial css had to do with the error.
I've made you a working example containing 3 elements: the lines and the custom cursor.
I calculate the window height (win_H) and width (win_W) and the width of the custom cursor (myc_W).
The lines are fixed at the left and right bottom of the window, touching at the left and right corner of the custom pointer. From there it's simply maths: calculate the triangles (Pythagoras c2=a2+b2) and the angles (note the angles are in radials, not degrees!).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
perspective: 500px;
perspective-origin: top;
transform-style: preserve-3d;
width: 100%;
height: 100vh;
background: black;
position: relative;
}
#my_cursor {
position: absolute;
width: 8rem;
height: 3px;
border-radius: 10px;
background: white;
left: 0px;
top: 0px;
}
#line_1{
position: absolute;
background: white;
width: 2px;
height: 100%;
bottom: 0;
left: 0;
transform-origin: bottom left;
backdrop-filter: blur(20px);
}
#line_2{
position: absolute;
background: white;
width: 2px;
height: 100%;
bottom: 0;
right: 0;
transform-origin: bottom right;
backdrop-filter: blur(20px);
}
</style>
</head>
<body>
<div id="line_1"></div>
<div id="line_2"></div>
<div id="my_cursor"></div>
</body>
<script>
let
my_cursor = document.getElementById("my_cursor"),
line_1 = document.getElementById("line_1"),
line_2 = document.getElementById("line_2"),
win_W=window.innerWidth,
win_H=window.innerHeight,
myc_W=(my_cursor.getBoundingClientRect().width)/2
;
//SET STARTING POSITION in middle of screen
_calculate( (win_W/2), (win_H/2));
document.onmousemove = (e) => {
_calculate( e.pageX, e.pageY);
}
function _calculate(mouseX,mouseY){
//CUSTOM CURSOR position:
let myc_XL = mouseX - myc_W,
myc_XR = mouseX + myc_W,
myc_Y = mouseY;
my_cursor.style.transform = `translate3d(${myc_XL}px, ${myc_Y}px , 0)`;
let a,b,c,angle;
//LINE 1
a = myc_XL;
b = win_H - mouseY;
c = Math.sqrt((a*a)+(b*b));
angle = Math.asin( a /c );
line_1.style.transform = "rotateZ(" + angle + "rad) scaleY(" + (c/win_H) + ")";
//LINE 2
a = win_W - myc_XR;
c = Math.sqrt((a*a)+(b*b));
angle = Math.asin( a / c );
line_2.style.transform = "rotateZ(" + (-angle) + "rad) scaleY(" + (c/win_H) + ")";
};
</script>
</html>
I have recently created a program which creates new element when someone clicks it. The new element which is created has some specific CSS styling. Now i want it's background to randomly change when the user clicks on button. Like the first time when someone clicks the background is red another time its green and so on like this.. My code is -
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
I want the background color of this box to change randomly..Please help, any help is appreciated..
as you can see from the code, I created a function that randomizes the numbers and puts them in the rgb.
function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
return bgColor;
}
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundColor = random_bg_color();
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
For answer your comment :
Generate random image:
var Images = new Array("https://via.placeholder.com/150/0000FF/808080","https://via.placeholder.com/150/FF0000/FFFFFF",
"https://via.placeholder.com/150/FFFF00/000000");
function randompic() {
var randomNum = Math.floor(Math.random() * Images.length);
return Images[randomNum];
}
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundImage = "url('"+randompic()+"')";
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
This seems to work:
http://jsfiddle.net/mcuzq9rb/
I included a random color generator and applied it to the style of the floating squares.
Let me know if it's what you wanted.
I would style the box with an rga-value, similar to how you randomly set the size of the bubble:
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
bubbles.style.backgroundColor = "rgb("+r+", "+g+", "+b+")";
Here's a little function that uses rando.js to set an element's background color to a random hex string.
function setRandomBackgroundColor(element) {
var hexString = "#";
for (var i = 0; i < 3; i++) {
var hex = rando(255).toString(16);
hexString += hex.length == 1 ? "0" + hex : hex;
}
element.style.backgroundColor = hexString;
}
<script src="https://randojs.com/1.0.0.js"></script>
<button onclick="setRandomBackgroundColor(document.body);">Set random background color</button>
to my understanding, .onclick, should work each time I click the button, however this is only working once. This is my code so far
var left = document.getElementById("left");
left.onclick = moveLeft;
function moveLeft() {
var box = document.getElementById("box1");
var pos = 200;
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
like I said, it works, but only once, it shifts the box to the left one square, but it shouldn't stop until after 5 squares.
please help...
The first answer is right, your pos variable revalue to 200 when you click your button everytime.
So it is just from 200 to 250 everytime.it look like same everytime.
try like this:
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
That is because your pos variable is defined inside the moveLeft function. Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.
Either make pos global as in below snippet.
Or set it dynamically within the function.
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
I am trying to show a tooltip by hovering the mouse on a circle inside a canvas. While the CSS is changing from hidden to visible by javaScript (saw that through chrome inspect), the tooltip is not showing up. Please help to sort this out. Thank you for your help.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
</canvas>
</div>
</body>
</html>
you need to move the .tooltip element out of the canvas element, otherwise it won't display.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);
// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) {
// Check whether point is inside circle
if (ctx.isPointInPath(circle, event.clientX, event.clientY)) {
showtext();
} else {
hidetext();
}
});
function showtext() {
document.getElementById("tooltiptext").style.visibility = 'visible';
}
function hidetext() {
document.getElementById("tooltiptext").style.visibility = 'hidden';
}
.tooltip {
visibility: hidden;
position: absolute;
top: 20px; left: 20px;
}
body {
margin: 0;
}
<canvas id="canvas"></canvas>
<div class="tooltip">
<span id="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
There were two issues:
The manner in which you were applying styles to your canvas were causing its display not to match its internal tracking of the position of the items it contained, so the if condition was not necessarily returning true when the cursor was over where the circle was appearing.
A canvas cannot render and display contents.
As such, the below snippet shows a version of this that works. You'll need to figure out how to position things correctly, but it solves the immediate issue.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
</canvas>
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">
blah
</span>
</div>
</div>
</body>
</html>
The problem was that you set the width and height of the canvas as the 100% of the parent in the css.
You need to set the canvas's width and height attribute instead.
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
<canvas id="canvas" width="200" height="200">
I am using The following snippet in order to create a scrolling textbox:
<html>
<head>
<style type="text/css">
#scroll {
position: absolute;
white-space: nowrap;
top: 0px;
left: 200px;
}
#oScroll {
margin: 0px;
padding: 0px;
position: relative;
width: 200px;
height: 20px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function scroll(oid, iid) {
this.oCont = document.getElementById(oid)
this.ele = document.getElementById(iid)
this.width = this.ele.clientWidth;
this.n = this.oCont.clientWidth;
this.move = function() {
this.ele.style.left = this.n + "px"
this.n--
if (this.n < (-this.width)) {
this.n = this.oCont.clientWidth
}
}
}
var vScroll
function setup() {
vScroll = new scroll("oScroll", "scroll");
setInterval("vScroll.move()", 20)
}
onload = function() {
setup()
}
</script>
</head>
<body>
<div id="oScroll">
<div id="scroll">This is the scrolling text</div>
</div>
</body>
</html>
however, I am looking to create a 'scrolling' image, and whenever I try to create an <img> tag within the 'This is the scrolling text' div, it doesn't show up on the page (at all).
I'm pretty new to javascript (ok, a complete novice) and would appreciate if anyone could inform me of a way of adding this image to this effect:
I have been unable to find a way of creating something like this, other than creating my own gif image in photoshop/etc.
EDIT
I tried using a marqee, however:
If you want to add an image that is 128px high into your div, you also need to change the height of the containing element from 20px to 128px.
Here's your code working:
<html>
<head>
<style type="text/css">
#scroll {
position: absolute;
white-space: nowrap;
top: 0px;
left: 200px;
}
#oScroll {
margin: 0px;
padding: 0px;
position: relative;
width: 200px;
height: 128px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function scroll(oid, iid) {
this.oCont = document.getElementById(oid)
this.ele = document.getElementById(iid)
this.width = this.ele.clientWidth;
this.n = this.oCont.clientWidth;
this.move = function() {
this.ele.style.left = this.n + "px"
this.n--
if (this.n < (-this.width)) {
this.n = this.oCont.clientWidth
}
}
}
var vScroll
function setup() {
vScroll = new scroll("oScroll", "scroll");
setInterval("vScroll.move()", 20)
}
onload = function() {
setup()
}
</script>
</head>
<body>
<div id="oScroll">
<img id="scroll" src='http://i.stack.imgur.com/P8i8o.png' />
</div>
</body>
</html>
If you want to use your existing code just alter the height of #oScroll in the CSS
<html>
<head>
<style type="text/css">
#scroll {
position: absolute;
white-space: nowrap;
top: 0px;
left: 200px;
}
#oScroll {
margin: 0px;
padding: 0px;
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
<script type="text/javascript">
function scroll(oid, iid) {
this.oCont = document.getElementById(oid)
this.ele = document.getElementById(iid)
this.width = this.ele.clientWidth;
this.n = this.oCont.clientWidth;
this.move = function() {
this.ele.style.left = this.n + "px"
this.n--
if (this.n < (-this.width)) {
this.n = this.oCont.clientWidth
}
}
}
var vScroll
function setup() {
vScroll = new scroll("oScroll", "scroll");
setInterval("vScroll.move()", 20)
}
onload = function() {
setup()
}
</script>
</head>
<body>
<div id="oScroll">
<div id="scroll"><img src="http://i.stack.imgur.com/P8i8o.png" /></div>
</div>
</body>
</html>