Canvas in Javascript only works when there is no other html code
Question
I made a drawing canvas first on a html page without any code to train, then i added it to my main html page but it wasnt working and there wasnt any errors in the console. I tried to remove all the css, still didnt work then i tried to delete all the html except the canvas and it worked. It also worked when i added it to the first line of code in the body, i tried to change the position whith position absolute and it didnt work again.
class signature{
constructor(){
this.canvas = document.querySelector('canvas');
this.bouton = document.querySelector('button');
this.ctx = this.canvas.getContext('2d');
this.dessin = false;
this.start ();
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height);
}
//sizing
tailleCanvas(){
this.canvas.width= 200;
this.canvas.height= 200;
}
//start the drawing
start (){
this.canvas.addEventListener('mousedown', ()=>{
this.dessin = true;
this.draw();
});
};
//draw
draw(){
this.canvas.addEventListener('mousemove', (e)=>{
if (!this.dessin) return;
this.ctx.lineWidth = 3;
this.ctx.lineCap = 'round';
this.ctx.strokeStyle = '#ff0000';
this.ctx.lineTo(e.clientX,e.clientY);
this.ctx.stroke();
})
};
//stop drawing
stop(){
this.canvas.addEventListener('mouseup', ()=>{
this.dessin = false;
this.ctx.beginPath();
});
};
//clean canvas
bouttonSup(){
this.bouton.addEventListener('click', ()=>{
this.ctx.clearRect(0,0,this.canvas.width, this.canvas.height);
})
}
1 answers
solution1
0 2019-12-13 11:02:09
try to move your js file after body tag
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<canvas>
</canvas>
<button>Button</button>
</body>
<script>
class signature {
constructor() {
this.canvas = document.querySelector('canvas');
console.log(this.canvas.width, this.canvas.height);
this.bouton = document.querySelector('button');
this.ctx = this.canvas.getContext('2d');
this.dessin = false;
this.start();
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
//sizing
tailleCanvas() {
this.canvas.width = 200;
this.canvas.height = 200;
}
//start the drawing
start() {
this.canvas.addEventListener('mousedown', () => {
this.dessin = true;
this.draw();
});
};
//draw
draw() {
this.canvas.addEventListener('mousemove', (e) => {
if (!this.dessin) return;
this.ctx.lineWidth = 3;
this.ctx.lineCap = 'round';
this.ctx.strokeStyle = '#ff0000';
this.ctx.lineTo(e.clientX, e.clientY);
this.ctx.stroke();
})
};
//stop drawing
stop() {
this.canvas.addEventListener('mouseup', () => {
this.dessin = false;
this.ctx.beginPath();
});
};
//clean canvas
bouttonSup() {
this.bouton.addEventListener('click', () => {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
})
}
}
let data = new signature();
</script>
</html>
the reason is before loading your page its calling this document.queryselector for canvas but at that time this canvas was not present. or maybe when you instansitate object for your class use settimeout for 2 sec or 1 sec and then try if it works. anyway using setTimeout is not a good solution
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.