Create Custom Tools

hi everyone, i am trying to create custom tools for the viewer which would perform image processing operations like sharpen etc, i tried manipulating the canvas but the changes would get removed if i click another tool here is my code.

mouseDragCallback(evt) {
    const { element, deltaPoints } = evt.detail;
    const enabledElement = getEnabledElement(element);
    const { renderingEngine, viewport } = enabledElement;
    const canvas = viewport.getCanvas()
    const ctx = canvas.getContext("2d")
    ctx.rect(10, 10, 150, 100);
    ctx.fillStyle = "red";
    ctx.fill();
  }