very basic drawing on canvas

by J. Jones

HTML

<html>
<body>
    <canvas id="canvas" width="500" height="500" style="border: 1px solid black;"/>
</body>
</html>

JavaScript

function doFirst() {
    var x = document.getElementById('canvas');
    window.canvas = x.getContext('2d');
    window.addEventListener("mousemove", rys, false);
    // we need to keep track of mousedown and mouseup events as well
    window.addEventListener("mousedown", onmousedown, false);
    window.addEventListener("mouseup", onmouseup, false);
}

function onmousedown(e) {
    // keep track of when the first mouse button is pressed in a global variable
    window.mousepressed = (e.button == 0);
}

function onmouseup(e) {
    // if the user released the first mouse button, reset the global mousepressed flag
    window.mousepressed = !(e.button == 0);
}

function rys(e) {
    // we only want to draw if the user is currently pressing the first mouse button
    if (!window.mousepressed) return;
    var xPos = e.clientX;
    var yPos = e.clientY;
    canvas.fillStyle = "#000";
    canvas.beginPath();
    canvas.arc(xPos - 7, yPos - 7, 10, 0, Math.PI * 2, true);
    canvas.closePath();
    canvas.fill();

}
window.addEventListener("load", doFirst, false);
doFirst();