Html5 Canvas Filltext Disappears With Sketch.js

I have a problem with the HTML5 canvas element. I use sketch.js so the client can make drawings in a webpage. One of the clients requirement is that he can add 'stamps' with number

Solution 1:

sketchJS clears and redraws the canvas frequently as determined by its source code. For example each new drawing action by the user will clear & redraw the canvas.

Your this.context.fillText code temporarily "borrows" the sketchJS canvas and draws your text on the canvas. Your text disappears when sketchJS internally decides it need to clear the canvas.

sketchJS does not currently support text, so if you want to permanently put text onto the canvas without having sketchJS erase your text, you will have to modify the source to add the fillText capability.

Alternatively, a workaround might be to add an html canvas element on top-of-and-overlapping your sketchJS canvas (like an html canvas "layer" over your sketchJS canvas). Then draw your text onto the top canvas. This way SketchJS won't erase your desired text.

Note: You must prevent the overlaying canvas from intercepting mouse events. You can do this by setting pointer-events:none; on the top canvas. Here's a link about pointer-events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events