Yes, I am creating one sketch board for my students. At this moment, the sketch board is so simple just with Stroke, ColorPicker, Eraser, and one Clear button, the code is following:
document.oncontextmenu=new Function("event.returnValue=false;");
let cv, myCanvas, slider, palette;
let myCanvasBgColor = "white";
let sliderX = 0, sliderY = 0;
let sliderDiameter = 50;
let paletteX = sliderX + sliderDiameter / 2;
let paletteY = sliderY + sliderDiameter / 2;
let paletteWidth = 100, paletteHeight = 150;
let strokeWeightSlider, colorPickerButton, eraserButton, eraserPen, clearButton;
let myToolsWidth = 80;
let myToolsHeight = 20;
let paletteReady = false;
let eraserReady = false;
function setup() {
cv = createCanvas(windowWidth, windowHeight);
myCanvas = createGraphics(windowWidth, windowHeight);
slider = createDiv();
palette = createDiv();
myCanvas.background(myCanvasBgColor);
image(myCanvas, 0, 0);
slider.size(sliderDiameter, sliderDiameter);
slider.style("background", "yellow");
slider.style("border-radius", "50%");
slider.style("z-index", "2");
slider.style("cursor", "pointer");
slider.doubleClicked(paletteShow);
slider.position(sliderX, sliderY);
palette.size(paletteWidth, paletteHeight);
palette.style("background", "pink");
palette.style("border-radius", "10px");
palette.style("z-index", "1");
palette.style("cursor", "pointer");
palette.style("display", "flex");
palette.style("flex-direction", "column");
palette.style("justify-content", "center");
palette.style("align-items", "center");
palette.style("box-shadow", "2px 2px 5px black");
palette.position(paletteX, paletteY);
palette.hide();
strokeWeightSlider = createSlider(0, 60, 10);
strokeWeightSlider.size(myToolsWidth, myToolsHeight);
strokeWeightSlider.addClass("tools");
strokeWeightSlider.parent(palette);
colorPickerButton = createColorPicker("purple");
colorPickerButton.size(myToolsWidth, myToolsHeight);
colorPickerButton.addClass("tools");
colorPickerButton.parent(palette);
eraserButton = createDiv("ERASER");
eraserButton.style("text-align", "center");
eraserButton.size(myToolsWidth, myToolsHeight);
eraserButton.mousePressed(myEraser);
eraserButton.addClass("tools");
eraserButton.parent(palette);
eraserPen = createDiv();
eraserPen.style("background", "white");
eraserPen.style("border-radius", "50%");
eraserPen.style("border", "1px solid black");
clearButton = createDiv("CLEAR");
clearButton.style("text-align", "center");
clearButton.size(myToolsWidth, myToolsHeight);
clearButton.mousePressed(myClear);
clearButton.addClass("tools");
clearButton.parent(palette);
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function paletteShow() {
if (paletteReady == false) {
palette.style("display", "flex");
paletteReady = true;
} else {
palette.hide();
paletteReady = false;
}
}
function myEraser() {
if (eraserReady == false) {
eraserPen.show();
eraserReady = true;
eraserButton.style("background", "orange");
} else {
eraserPen.hide();
eraserReady = false;
eraserButton.style("background", "ivory");
}
}
function myClear() {
clearButton.style("background", "orange");
setTimeout(() => clearButton.style("background", "ivory"), 100);
myCanvas.background(myCanvasBgColor);
image(myCanvas, 0, 0);
}
function touchMoved() {
let strokeWeight = strokeWeightSlider.value();
let strokeColor = colorPickerButton.color();
if (mouseX > sliderX && mouseY > sliderY && mouseX < sliderX + sliderDiameter && mouseY < sliderY + sliderDiameter) {
// make sure that slider and palette are always in the window
if (sliderX >= 0 && sliderY >= 0 && sliderX <= windowWidth - sliderDiameter && sliderY <= windowHeight - sliderDiameter) {
sliderX = mouseX - sliderDiameter / 2;
sliderY = mouseY - sliderDiameter / 2;
} else {
if (sliderX < 0) {
sliderX = 0;
} else if (sliderX > windowWidth - sliderDiameter) {
sliderX = windowWidth - sliderDiameter;
}
if (sliderY < 0) {
sliderY = 0;
} else if (sliderY > windowHeight - sliderDiameter) {
sliderY = windowHeight - sliderDiameter;
}
}
slider.position(sliderX, sliderY);
paletteX = sliderX + sliderDiameter / 2;
paletteY = sliderY + sliderDiameter / 2;
// make sure that palette is in the right palce according to slider
if (paletteX > windowWidth - paletteWidth) {
paletteX = sliderX + sliderDiameter / 2 - paletteWidth;
}
if (paletteY > windowHeight - paletteHeight) {
paletteY = sliderY + sliderDiameter / 2 -paletteHeight;
}
palette.position(paletteX, paletteY);
} else if (eraserReady) {
eraserPen.size(strokeWeight, strokeWeight);
eraserPen.position(mouseX - strokeWeight / 2, mouseY - strokeWeight / 2);
myCanvas.stroke(myCanvasBgColor);
myCanvas.strokeWeight(strokeWeight);
myCanvas.line(mouseX, mouseY, pmouseX, pmouseY);
image(myCanvas, 0, 0);
} else {
if (palette.style("display") == "none") {
myCanvas.stroke(strokeColor);
myCanvas.strokeWeight(strokeWeight);
myCanvas.line(mouseX, mouseY, pmouseX, pmouseY);
image(myCanvas, 0, 0);
} else {
if (!(mouseX > paletteX && mouseY > paletteY && mouseX < paletteX + paletteWidth && mouseY < paletteY + paletteHeight)) {
myCanvas.stroke(strokeColor);
myCanvas.strokeWeight(strokeWeight);
myCanvas.line(mouseX, mouseY, pmouseX, pmouseY);
image(myCanvas, 0, 0);
}
}
}
}
Although the sketch board is on the way of completion, I think it is time to get some advice from p5 community, only in this way can I continue my work efficiently and better. Every aspect welcome, such as coding style, efficiency imporvement, potential bug, future feature.
By the way, one problem I encounter now is that the slider( the yellow circle) is not smooth as expected when touchMoved happens, so how to improve it?
you can try the sketch board via http://175.24.42.77:14290/p5.
Looking forward reply 
PS: the board is for touch device, not for keyboard and mouse.