CODEWITHSUNDEEP
javascripthtmlcanvas
NathanaëlBeau
NathanaëlBeau

Reputation: 1152

HTML 5 - drawing app with canvas is not drawing

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 ?

Upvotes: 0

Views: 52

Answers (2)

Aurel B&#237;l&#253;
Aurel B&#237;l&#253;

Reputation: 7963

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>

Upvotes: 1

yunzen
yunzen

Reputation: 33439

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>

Upvotes: 1

Related Questions