HTML 5 - drawing app with canvas is not drawing
Question
I tried to create a drawing app with canvas like this :
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
canvas{
border: 1px solid black
}
</style>
<title>Qui sommes-nous?</title>
</head>
<body>
<canvas id = "a" width = "400" height = "200"></canvas>
<script type="text/javascript">
var md = false;
var canvas = document.getElementById('a');
canvas.addEventListener('mousedown', down);
canvas.addEventListener('mouseup', toggledraw);
canvas.addEventListener('mousemove',
function (evt){
var mousePos = getMousePos (canvas, evt);
var posx = mousePos;.x;
var posy = mousePos.y;
draw(canvas, posx, posy);
});
function down(){
md = true;
}
function toggledraw(){
md = false;
}
function getMousePos(canvas, evt){
var rect = canvas.getBoundingClientRect();
return {
x:evt.clientX - rect.left,
y:evt.clientY - rect.top
};
}
function draw (canvas, posx, posy){
var context = canvas.getContext('2d');
if (md){
context.fillRect(posx, posy, 4, 4);
}
}
</script>
</body>
However, when I am trying to draw in my screen, nothing happened. I tried it on Chrome, Firefox and Safari. I was looking for the easiest way but I don't understand my mistake... What am I doing wrong ?
2 answers
solution1
1 2019-01-08 14:08:09
In line 8 you have:
var posx = mousePos;.x;
The ; is wrong. This is right:
var posx = mousePos.x;
var md = false; var canvas = document.getElementById('a'); canvas.addEventListener('mousedown', down); canvas.addEventListener('mouseup', toggledraw); canvas.addEventListener('mousemove', function (evt){ var mousePos = getMousePos (canvas, evt); var posx = mousePos.x; var posy = mousePos.y; draw(canvas, posx, posy); }); function down(){ md = true; } function toggledraw(){ md = false; } function getMousePos(canvas, evt){ var rect = canvas.getBoundingClientRect(); return { x:evt.clientX - rect.left, y:evt.clientY - rect.top }; } function draw (canvas, posx, posy){ var context = canvas.getContext('2d'); if (md){ context.fillRect(posx, posy, 4, 4); } }
canvas { border: 1px solid black; }
<canvas id="a" width="400" height="200"></canvas>
solution2
1 2019-01-08 14:09:17
When debugging you should look into the console (developer tools) before asking here. In your case you have a syntax error var posx = mousePos;.x; – the first ; should not be there.
var md = false; var canvas = document.getElementById('a'); canvas.addEventListener('mousedown', down); canvas.addEventListener('mouseup', toggledraw); canvas.addEventListener('mousemove', function (evt){ var mousePos = getMousePos (canvas, evt); var posx = mousePos.x; var posy = mousePos.y; draw(canvas, posx, posy); }); function down(){ md = true; } function toggledraw(){ md = false; } function getMousePos(canvas, evt){ var rect = canvas.getBoundingClientRect(); return { x:evt.clientX - rect.left, y:evt.clientY - rect.top }; } function draw (canvas, posx, posy){ var context = canvas.getContext('2d'); if (md){ context.fillRect(posx, posy, 4, 4); } }
canvas{ border: 1px solid black; }
<canvas id="a" width="400" height="200"></canvas>
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.