Drawing application with JavasScript

I’ve got this basic drawing app. It’s quite succinct. Still, I wonder if there’s a way to streamline the code further? For instance cutting back on variables? Is it necessary to have a separate variable to detect mousedown? Also, is it possible to use fewer functions?

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');
ctx.lineWidth = 5;
ctx.strokeStyle = "#CC0000";
ctx.lineJoin = 'round';
ctx.lineCap = 'round';

/* Variable that will be used to tell if mouse button is down or not. */
var dragging = false;

canvas.addEventListener('mousemove', draw);

canvas.addEventListener('mousedown', function mousedown() {
	dragging = true;
	ctx.moveTo(x, y);
	canvas.addEventListener('mousemove', draw, false);

function draw(e) {
	x = e.clientX - canvas.offsetLeft;
	y = e.clientY - canvas.offsetTop;

	if(dragging == true) {
		ctx.lineTo(x, y);

canvas.addEventListener('mouseup', function mouseup() {
	dragging = false; 

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.