estoy confundido con los onmousedown y onmouseup, no sé como hacer para que funcionen correctamente
<canvas width="600" height="400"></canvas>
<body>
<script>
var pantalla=document.querySelector("canvas");
var pincel=pantalla.getContext("2d");
function crearFondo(){
pincel.fillStyle="white";
pincel.fillRect(0,0,600,400);
}
function crearPaleta(x,color){
pincel.fillStyle=color;
pincel.beginPath();
pincel.fillRect(x,0,50,50);
}
function dibujarCirculo(parametros){
var mouseX=parametros.pageX-pantalla.offsetLeft;
var mouseY=parametros.pageY-pantalla.offsetTop;
if( (mouseX<160) && (mouseY<60)){
deshabilitarDibujo();
}else{
habilitarDibujo();
}
if(dibujar){
pincel.fillStyle=color;
pincel.beginPath();
pincel.arc(mouseX,mouseY,10,0,2*Math.PI)
pincel.fill();
}
}
function deshabilitarDibujo(){
dibujar=false;
}
function habilitarDibujo(){
dibujar=true;
}
function comprobarColor(parametros){
var mouseX=parametros.pageX-pantalla.offsetLeft;
var mouseY=parametros.pageY-pantalla.offsetTop;
if((mouseX<50)&&(mouseY<50)){
color="red";
}
if((mouseX>50)&&(mouseX<100)&&(mouseY<50)){
color="green";
}
if((mouseX>100)&&(mouseX<150)&&(mouseY<50)){
color="blue";
}
}
crearFondo();
crearPaleta(0,"red");
crearPaleta(50,"green");
crearPaleta(100,"blue");
var dibujar=true;
var color="blue";
pantalla.onclick=comprobarColor;
pantalla.onmousemove=dibujarCirculo;
pantalla.onmousedown=habilitarDibujo;
pantalla.onmouseup=deshabilitarDibujo;