This is my first HTML code. i m trying to put a canvas where user can put e signature by his mouse. Can anyone help me where im wrong. The html and css part works but e signature is not showing on the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eSignature Page</title>
<style>
.wrapper {
position: relative;
width: 400px;
height: 200px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: white;
}
</style>
<script>
var canvas = document.getElementById('signature-pad');
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
</script>
</head>
<body>
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<button id="clear">Clear</button>
</body>
</html>
There is this point :
You seem to use this external library but you don't load it on
your code
You need to load it, the simplest way is to load it from the CDN
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
After as you specify the background-color in your css :
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: white; // <----- Here
}
Hence, you don't need to add the option when you create your signaturePad :
// BEFORE
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});
// AFTER
const signaturePad = new SignaturePad(canvas);
const canvas = document.getElementById('signature-pad');
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
const signaturePad = new SignaturePad(canvas);
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
.wrapper {
position: relative;
width: 400px;
height: 200px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: lightgrey; // For visualisation puropse, I changed it
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eSignature Page</title>
</head>
<body>
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<button id="clear">Clear</button>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
</body>
</html>
Related
Basically, I want to make the resize bar move as I move the cursor across as long as I'm focusing on it. I did that but the thing is that it's being glitchy. It returns to the original state one time and the other time follows the cursor. I don't want it to do that.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
slider.style.left += e.offsetX + "px";
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
slider.style.left = e.offsetX + "px"
console.log("Cursor is " + e.offsetX)
console.log("Element is" + slider.style.left)
}
})
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
As you can see, as you drag the element, it works but it isn't smooth. It returns to its original coordinates sometimes and then follows the cursor the other time.
.offsetX is the mouse position relative to the element, so that makes the slider jump. .clientX is the mouse position relative to the document.
In order to use clientX, however, you need to subtract the original x position of the slider. I'm going to assume that .Container will always be the container for the slider. By using getBoundingClientRect() (which is a operation that takes time), I can get the x position (.left) from said container.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
updateSliderPosition(e.clientX);
console.clear();
console.log("Cursor is " + e.clientX);
console.log("Element is" + slider.style.left);
}
})
function updateSliderPosition(value) {
let box = container.getBoundingClientRect();
slider.style.left = value - box.left + "px";
}
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
My approach is to use a translation, which are generally considered better for animations than absolute positioning, for moving the slider.
I'm also using pointer events over mouse events. These work the same as mouse events but also will work for touch devices. They also allow the use of setPointerCapture, which means that once we have clicked on the slider, it will receive all events until we release it (which we do in the mouseUpHandler). You can see in the demo that even if the pointer goes outside the image, you can still move the slider around.
let slider = document.querySelector("#slider");
let container = document.querySelector('#container');
let sliderWidth = container.offsetWidth * (1 / 100);
let maxWidth = container.offsetWidth - sliderWidth;
let lastX = 0;
let thisX = 0;
let leftEdge = 0;
function mouseDownHandler(e) {
lastX = e.clientX;
slider.addEventListener('pointermove', mouseMoveHandler);
slider.setPointerCapture(e.pointerId);
}
function mouseMoveHandler(e) {
thisX = e.clientX;
xDiff = thisX - lastX;
leftEdge = Math.min(maxWidth, Math.max(0, leftEdge + xDiff));
slider.style.transform = `translate(${leftEdge}px)`;
lastX = thisX;
}
function mouseUpHandler(e) {
slider.removeEventListener('pointermove', mouseMoveHandler);
slider.releasePointerCapture(e.pointerId);
}
slider.addEventListener("pointerdown", mouseDownHandler);
slider.addEventListener("pointerup", mouseUpHandler)
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone,
.conttwo {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.contone {
z-index: -11;
}
.conttwo {
z-index: -11111;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: red;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<div id="container" class="Container">
<div class="contone">
<img class="Pic1" src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg" />
</div>
<div id="slider" class="Slider"></div>
<div class="conttwo">
<img class="Pic2" src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg" />
</div>
</div>
I have a project where I want to achieve a glass effect through a lens, running over the entire site. I tried with PixiJS, but it only works on the canvas. It's important that the filter is on every element on the site. I've succeded in putting an SVG displacement filter on the body through CSS, and it distorts (!) but the body and everything on the site, is also only visible through the image, I'm using to displace.
Is it possible to achieve a glass lens, running over the site using SVG filters, or is there another way which is better?
Here is the code I have so far
I did not write the js entirely by myself. I found an example of displacement here https://codepen.io/osublake/pen/WQyBJb
For reference this is the effect I'm after, but without canvas https://zumi.gucci.com/
And how would I go ahead an animate the SVG feImage? I tried with the setAttribute x and y, but it doesn't move
Thanks
<!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>Glass Displacement</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.5/pixi.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg>
<defs>
<filter id="displace-filter">
<feImage id="displaceImg" x="512" y="512" width="100%" height="100%" result="displaceImage" />
<feDisplacementMap id="displacement-map"
xChannelSelector="R"
yChannelSelector="G"
in="SourceGraphic"
in2="displaceImage"
color-interpolation-filters="sRGB"
scale="100"
result="displacementMap"
/>
<feComposite in2="displaceImage" operator="in" />
</filter>
</defs>
</svg>
<div class="wrapper">
<img src="https://source.unsplash.com/X0Tavx1j8Wc" alt="">
<h1>Bornholm</h1>
</div>
<div id="glass"></div>
<script src="svgdisplace.js"></script>
</body>
</html>
*,
*::before,
*::after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
#font-face {
font-family: system;
font-style: normal;
font-weight: 400;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
html, body {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: "system";
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
filter: url("#displace-filter");
}
html {
font-size: 16px;
}
h1 {
margin-top: 0;
font-size: 11.089em;
font-weight: 100;
}
.wrapper {
position: relative;
width: 75vw;
height: 75vh;
overflow: hidden;
}
.wrapper img {
width: 100%;
position: relative;
bottom: 50%;
}
#glass {
background: chartreuse;
width: 200px;
height: 200px;
position: absolute;
/* filter: url(#noise); */
}
svg {
position: absolute;
top: 500px;
left: 500px;
transform: translate(-50%, -50%);
}
.wrapper h1 {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
var xlink = "http://www.w3.org/1999/xlink";
var imgUrl = "_assets/displace2.png";
var feImage = document.querySelector("feImage");
var displaceImg = document.getElementById("displaceImg");
var speed = {
x: 2,
y: 1
};
toBase64(imgUrl, function(data){
feImage.setAttributeNS(xlink, "xlink:href", data);
});
function toBase64(url, callback){
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function(){
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
callback(dataURL);
canvas = null;
};
img.src = url;
}
animate();
var tx = 0;
var ty = 0;
function animate(){
tx += 0.027;
ty += 0.031;
displaceImg.setAttribute("x", speed.x);
displaceImg.setAttribute("y", speed.y);
speed.x += 0.1;
speed.y += 0.1;
renderer.render(stage); */
requestAnimationFrame(animate);
}
Here is the image, I'm using to displace
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 FabricJS and the shapes are not displaying, my code is on JSFiddle:
https://jsfiddle.net/270t9hfs/1/
var canvas = new fabric.Canvas("canvas");
function addRectangle(){
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: "red",
width: 20,
height: 20,
angle: 0
});
canvas.add(rect);
}
The following example has a working addRectangle function:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a{
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
#canvas {
border: 1px solid;
}
button { margin-top: 9px }
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<button onclick="addRectangle()">Add Rectangle</button>
<button onclick="addTriangle()">Add Triangle</button>
<button onclick="addCircle()">Add Circle</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<script type="text/javascript">
var canvas = new fabric.Canvas("canvas");
function addRectangle(){
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: "red",
width: 20,
height: 20,
angle: 0
});
canvas.add(rect);
}
</script>
</body>
</html>
Two issues were breaking your code:
Missing Fabric JS library
Initialising your Fabric JS canvas before the DOM had loaded. Moving the JavaScript to the bottom of the page resolves this. Alternatively you could use JavaScript to listen for when the DOM has loaded.
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.